Menu
I'm using the Twitter Bootstrap fixed layout where the container div has:
margin-left: auto;
margin-right: auto;
So it always stays in the center.
What I want to do is position the container so that there is a 100px gap between the left browser window border and the container. When the window gets smaller I want the container move to border of the window.
How can I achieve this?
200
We can create a full width container in Bootstrap5 using “. container-fluid” class. It sets the container width equal to 100% in all screen sizes. This means the container spans the entire width of the viewport.
To center div both vertically and horizontally use flexbox utilities. See the examples. Add d-flex align-items-center justify-content-center classes to the parent element to center its content vertically and horizontally.
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.
An alternative to changing the margins of the container is to use container-fluid an only use 8 (or 10) of the 12 columns on larger screens...
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
.. page layout here
</div>
</div>
</div>
http://www.bootply.com/SRnhM22tPr
58
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
