Menu
I am making a login page using Bootstrap 4. The max width of a container using Bootstrap seems to be 1140px? My monitor is 1920px as for now. Do I have to override the value of bootstrap to be 1920px in order to make it support monitors of that size?
This is the code I am using where I want to center the content of the login form (code is just for test in order to center content):
<body>
<div class="container h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<h1 class="display-3">Hello, world!</h1>
</div>
</div>
</body>
Or even for bigger monitors, should I increase the size to something insanely high (like 999999px) in order to support them?
Thanks for any feedback!
856
Simply use the container-fluid class instead of container to get full width.
An even better option in your case would be to use the fluid jumbotron like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>That fluid jumbotron with the container class above is a good option because it makes sure that users on wide 4K screens won't get mad at you. :-)
168
We can update the _variable.scss or we can change container-fluid class from container
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1440px
) !default;
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
