One thing I've noticed is that many websites, including SO, do not expand to the full width of the screen. Instead, they often have a fixed-width content column or set a max-width property for it. The Merriam-Webster dictionary website is a prime example of the latter approach.
Can this type of layout be achieved using Bootstrap? I was able to restrict the width of the content column within a col-8-md div, but now there is a significant gap between the content and the right sidebar on larger displays.
Check out the live demo: https://codepen.io/anon/pen/dNprzm
HTML code snippet:
<div class="row">
<div class="col-md-8">
<div class="content-block">
CONTENT
</div>
</div>
<div class="col-md-4 right-bar">
RIGHT_BAR
</div>
</div>
CSS code snippet:
.content-block {
height: 1000px;
max-width: 1000px;
background-color: lightgreen;
margin-left: auto;
margin-right: auto;
}
.right-bar {
background-color: pink;
width: 400px;
}