Menu
I am using bootstrap-responsive and scaffolding successfully,
my question is if I can increase the container's width and keep the responsive capabilities
<div class="container" style="width:1300px"> ?
221
Bootstrap comes with three different containers: .container , which sets a max-width at each responsive breakpoint. .container-fluid , which is width: 100% at all breakpoints. .container-{breakpoint} , which is width: 100% until the specified breakpoint.
container-fluid class provides a full width container, spanning the entire width of the viewport.
Width and Height Utilities The width and height can be set for an element, by using 25%, 50%, 75%, 100%, and auto values. For instance, use w-25 (for remaining values, replace 25 with those values) for width utility and h-25 (for remaining values, replace 25 with those values) for height utility.
Bootstrap comes with three different containers: 1 .container, which sets a max-width at each responsive breakpoint 2 .container-fluid, which is width: 100% at all breakpoints 3 .container- {breakpoint}, which is width: 100% until the specified breakpoint More ...
To make your content responsive according to screen sizes, you have to use container classes within which you can add rows and columns. In this tutorial, you will learn all types of containers in Bootstrap 4 to wrap your content inside it. All layout of Bootstrap 4 start with a container that you will learn here.
The width of the fluid container will always be 100% irrespective of the devices or screen sizes. Since Bootstrap v4.4, you can also create containers that is 100% wide until the specified breakpoint is reached, after which max-width for each of the higher breakpoints will be applied.
Fixed width container with different width changes according to screen sizes. The full-width container covers the entire screen with 100% width. Responsive width container new in Bootstrap 4.4 used for 100% width until reached specified breakpoints. Let’s start learning both of them in detail below.
It seems you want to use the whole width of a wide screen desktop screens... If that's what you want, while keeping it responsive/fluid. Then you may just change your div class to
from
<div class="container">
to
<div class="container-fluid">
if you are on bootstrap 3 use .container-fluid instead of .container
<div class="container-fluid">
<div class="row">
...
</div>
</div>
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
reference:- http://getbootstrap.com/css/#grid
33
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
