I want to add a sticky header to my page and bootstrap provides a class for it, also I added a container to center the content and make it as wide as the content below.
But when I add a row and 12 columns not the full width of the container is taken, see below for the code.
<nav class="navbar fixed-top navbar-light sticky-header">
<div class="container sticky-header-container">
<div class="row">
<div class="col-md-3">test3
</div>
<div class="col-md-6">test2
</div>
<div class="col-md-3">test3
</div>
</div>
</div>
</nav>
You could add a class to your row like so:
EDIT: As ZimSystem pointed out, there is a w-100 class in bootstrap, so just do:
<div class="row w-100">
Your Elements
</div>
This should get you 100% of the containers width.
Working sample: https://www.bootply.com/J5gKTedgPr
The Bootstrap 4 Navbar isn't designed to contain the grid rows and cols. It's designed to contain the support content.
When you use a container inside a navbar it makes the container display:flex which is making the row you have in the container align to the start (left-side) of the container which won't fill the width.
As a workaround/hack you could revert the container to display:block using d-block, and then remove the default left/right padding from the navbar using px-0:
https://www.codeply.com/go/T81SqA32rJ
<nav class="navbar fixed-top sticky-header px-0">
<div class="container-fluid d-block sticky-header-container">
<div class="row">
<div class="col-md-3">test3
</div>
<div class="col-md-6">test2
</div>
<div class="col-md-3">test3
</div>
</div>
</div>
</nav>
Related
This question already has answers here:
Bootstrap 3.3.7 "row" causing horizontal scroll bar
(7 answers)
How to make bootstrap 3 fluid layout without horizontal scrollbar
(21 answers)
Closed 4 years ago.
I made a page with Bootstrap 4 and there's a white space on the right.
I have everything except the nav bar in a div with class col. I didn't put the rows and cols inside a container div because Bootstrap documentation suggests going without it for an edge-to-edge design. (I tried putting them inside a container-fluid div and the gap was still there).
Since col adds 15px on the right and left, I also tried the following, and it didn't remove the gap:
.col {
padding-right: 0 !important;
padding-left: 0 !important;
}
CodePen
There is no need to overwrite bootstrap classes. Use the inbuilt utilities class to overwrite if you have to. Since hero image has to be edge-to-edge you can use p-0 to remove the padding. In footer also you are missing the row-col structure. and wrap your content inside container-fluid as shown in example below.
Try this
Check Demo HERE
HTML
<nav class="navbar navbar-expand-md bg-dark sticky-top navbar-dark">
<!-- Navbar Content -->
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col p-0">
<div class="hero-image">
<div class="hero-text text-white">
<h1>NC</h1>
<h5>Web developer</h5>
<form action="mailto:email#gmail.com" method="post" enctype="text/plain">
<button class="btn btn-dark btn-top btn-contact">Contact Me</button>
</form>
</div>
</div>
</div>
</div>
<section id="about">
<div class="row about">
<div class="col">
<h2>About</h2>
<!-- Content -->
</div>
</div>
</section>
<section id="portfolio">
<div class="row portfolio">
<div class="col-sm-12">
<h2>Portfolio</h2>
</div>
<!-- Content -->
</div>
<!-- End of row div -->
</section>
<section id="contact">
<div class="row contact">
<div class="col center-block">
<h2>Contact</h2>
<p>Have a question or want to work together?</p>
<!-- Content -->
</div>
</div>
</section>
<div class="footer bg-dark row">
<div class="col">
<!-- Content -->
</div>
</div>
</div>
try this
.col{
padding: 0 !important;
}
.row{
margin-left: 0;
margin-right: 0;
}
this is why I hate using bootstrap, since you have to use !important to override bootstrap default style. it even worse using themes based on bootstrap, since its already using !important to override bootstrap style, and you want to override it again
All you need to do is wrap all row in container-fluid like this
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="hero-image">
</div>
</div>
</div>
</div>
<section id="about">
<div class="container-fluid">
<div class="row about">
<div class="col">
</div>
</div>
</div>
</section>
same you will have to do in portfolio and contact
I am starting out with bootstrap here and I want my page to limit itself to 1170px which is the container class standard, but I want the color to continue across the full width of the page.
The only idea I can think of is:
<div class="container-fluid BGtoExtendWholePage headerBG">
<div class="container">
<div class="row">
<div class="col-12">
Main Body of Page - Header
</div>
</div>
</div>
</div>
<div class="container-fluid BGtoExtendWholePage ContentBG">
<div class="container">
<div class="row">
<div class="col-12">
Main Body of Page - Main Content
</div>
</div>
</div>
</div>
There's big arguments against nesting containers in Bootstrap (cue the person to post a link to the bit of documentation saying not to) but I found this to work.
You nest a container within a container-fluid - note the use of p-0 to remove the padding from the inner container.
<div class="container-fluid bg-red mb-3">
<div class="row">
<div class="container p-0 mt-6 mb-6">
...
</div>
</div>
</div>
If you want a full-width background color that is the same in your whole project then you could simply add a <body> tag at the beginning and end of your code (if it isn't already there) and add the following to your CSS
body {
background-color: color-choise;
}
Fill in the color-choise with the color you want it to be.
I am trying to include a bootstrap grid inside another grid and make sure it is still responsive but on larger screens the child grid doesnt collapse.
<div class="container">
<div class="row">
<div class="col-md-6">First column content</div>
<div class="col-md-6">
<div class="row">
<!-- child grid -->
<div class="col-md-6"><img class="img-responsive" src="http://placehold.it/350x150"></div>
<div class="col-md-6">column content</div>
</div>
</div>
</div>
</div>
bootsplay link: http://www.bootply.com/PCMV1BF4YF
the child grid should collapse in larger screens because the width of the parent class is already small. Is it possible to get around this issue?
Inner col-*-* should also be contained in a row. Read the Bootstrap docs on nesting
<div class="container">
<div class="row">
<div class="col-md-6">First column content</div>
<div class="col-md-6">
<div class="row">
<div class="col-lg-6"><img class="img-responsive" src="http://placehold.it/350x150"></div>
<div class="col-lg-6">Second column content</div>
</div>
</div>
</div>
</div>
Make the inner grid col-lg-* if you want it to stack/collapse before the outer grid does. The breakpoint (when the columns stack) depends on the viewport width, not the width of the parent container.
Also, instead of overriding the Bootstrap container, use a custom class.
http://www.bootply.com/aoUZozmcsc
I'm switching to bootstrap4 today. I enabled flexbox in _variables.scss yet I'm confused about what exactly is flexbox capabilities of bootstrap4. For example
How can I make flex-direction:column?
Is it possible to have a column with fluid width? flex-grow?
I have this markup to build a full height sidebar layout
<div class="flex-col">
<div class="flex-row" id="topnav">
<div class="flex"> <!-- this will grow -->
Brand
</div>
<div> left navbar</div>
</div>
<div class=" flex flex-row"> <!--flex expand to fill full height -->
<div class="sidebar">Sidebar</div>
<div class="flex">Content</div> <!--take rest of row space-->
</div>
</div>
How can I achieve this with bootstrap flexbox?
Read the docs at: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/
You just need to enable flexbox, and the row, col-* use flexbox. BS3 uses flex-wrap and flex-direction:row, instead of flex-direction:column The new auto-layout columns use flex-grow to consume the remaining space in a row.
<div class="row">
<div class="col-xs-4">
4
</div>
<div class="col-xs-3">
3
</div>
<div class="col-xs">
grow
</div>
</div>
Demo: http://www.codeply.com/go/rZNj0SSRmi
Update
In Bootstrap 4 alpha 6, flexbox is now the default so it no longer needs to be enabled. There are also new flexbox utilities for various properties like flex-column, justify-content-, align-items- etc.. The auto-layout columns can still be used to "grow` width or height.
<div class="container-fluid">
<div class="row">
<div class="col-3 sidebar">Sidebar</div>
<div class="col">Content</div>
</div>
</div>
Bootstrap 4 A6 example fluid layout
Default navbar spans horizontally across the browser window.
<div class="navbar navbar-static-top">
How do you declare the navbar to be only 750px width and placed at the center?
Setting margin:auto; in the CSS doesn't work.
The .navbar-static-top you are using forces your navbar to become full-width. Remove that class and you will get a resizable navbar. Then, you can wrap it in a span# of the size you want:
<div class="container">
<div class="row">
<div class="span6 offset3">
<div class="navbar">
...
</div>
</div>
</div>
</div>
Here you have an example: http://jsfiddle.net/simbirsk/xAMYF/