Menu
How to make fluid container in bootstrap 3?
In bootstrap 2.3.2 .container-fluid class is there. But now in bootstrap 3 it is missing and there is only .container class. Please help me.
673
container-fluid: The . container-fluid class provides a full-width container which spans the entire width of the viewport. In the below example, the div with class “container-fluid” will take up the complete width of the viewport and will expand or shrink whenever the viewport is resized. HTML.
Containers. Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.
You can simply use the . container class to create a responsive, fixed-width container. The width of the container will change at different breakpoints or screen sizes, as shown above.
The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide)
Bootstrap 3.0 moved to a "mobile first" approach. .container is really only there in instances where you need/want a boxy layout. but, if you exempt the div.container-fluid entirely, you're left with a fluid layout by default.
for example, to have a two-column fluid layout, simply use:
<body> <header>...</header> <div style="padding:0 15px;"><!-- offset row negative padding --> <div class="row"> <div class="col-md-6">50%</div> <div class="col-md-6">50%</div> </div> </div> <footer>...</footer> </body> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
