Havsula Havsula - 25 days ago 8
CSS Question

Bootstrap design with white space both side

I am using Bootstrap to design a webpage. Since many people uses large screens I prefer webpages where the content is centered with some white space on both sides. An example is this page:

https://www.nhstateparks.org/visit/state-parks/dixville-notch-state-park.aspx

I have tried to make a design like this:

<div class="container-fluid text-center">
<div class="row content">
<!--Uses an offset to get white space on left -->
<div class="col-sm-2 col-md-offset-2">
Sidebar with some links
</div>
<div class="col-sm-6">
Main content
</div>
<div class="col-sm-2">
<!--This is added only to get white space on right -->
</div>
</div>
</div>


But I want the page to behave like this page do. When you shrink the page, it will "use" the blank space on left and right before it start to scale the content. I see stackoverflow.com also do this. It to not start to scale the content before the white space on both side are used.

Answer

Replace the container-fluid class with container class.

<div class="container">
    <div class="row">
         <!--Uses an offset to get white space on left   -->
        <div class="col-sm-2">
            Sidebar with some links
        </div>
        <div class="col-sm-6">
            Main content
        </div>

    </div>
</div
Comments