Strange issue here. I’m employing a bootstrap grid
<div class="col-md-1"></div>
<div class="col-md-10"></div>
<div class="col-md-1"></div>
For my portfolio. On my laptop, which has a monitor of perhaps 16 inches, this looks fine. However, on my 24-inch monitor, the middle section looks oddly small, like it spans 8 columns instead of ten. Any idea why this would be? It is all inside a container class div.
EDIT: Here’s how it looks. And here’s a link
2
Answers
You need to use
.container-fluid
instead of.container
The latter has a max width of 1320px while the former has a max width of 100% and will span the entire width of the viewport.
See the Bootstrap documentation
See sample code below (expand to full page to see it better)
you can change the the grid size depending on screen size.
This may help you. just add 3 grid type class for screen size –
sm for small screen,
md for medium screen and
lg for large screen
you only need to increase greed size for large screen.
Hope this will work for your problem.