Bootstrap 3.0: Full-Width Color Background, Compact Columns in Center

Question

I was looking to make a striped business theme, similar to the one created by W3Schools. The theme can be found here. It is characterized by horizontal sections, separated by different background colors.

The one issue I had with it was that the columns in Services, Portfolio and Pricing, spanned pretty much the full width of the page, which I did not think looked great, particularly for the three pricing boxes, which i feel should be much narrower and still centered. Let's take those pricing boxes as the example for the purpose of the questions.

So, I embarked upon the task of squeezing these three pricing boxes into a narrower shape, centered on the page, while still maintaining the full-width alternating background color. I came up with three ways to do it:

1) Place a Container inside a Container-Fluid:

<div id="pricing" class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-xs-12">
                BlaBlaBla
            </div>
            ...
        </div>
    </div>
</div>

---

2) Make the following additions/changes to the css and html:

.fixed-width {
    display: inline-block;
    float: none;
    width: 300px;
}
.row-centered {
    text-align: center;
}

-

<div id="pricing" class="container-fluid">
    <div class="row row-centered">
        <div class="col-sm-4 col-xs-12 fixed-width">
            BlaBlaBla
        </div>
        ...
    </div>
</div>

---

3) 3x col-sm-2, with empty columns on each side

Keep the container-fluid layout, but instead of having three col-sm-4, I have an empty col-sm-3, three col-sm-2, and finally an empty col-sm-3 (for a total of 12 columns).

---

4) 3x col-sm-2, with offset-3 to center

Instead of having three col-sm-4, I have one col-sm-2 col-sm-offset-3, then two col-sm-2 (this does not add to 12, but i center with offset).**

---

The problem with both (3) and (4) is that once i shrink the browser window, the boxes become too small before they wrap to the next line (i.e. the text flows out of the box). In (4) it seems if i use container (as opposed to container-fluid), the boxes become too narrow in full-screen even.

What is the correct way of doing this? I assume this is an issue almost everyone making business websites stumbles across, yet I was not able to find the answer online having worked on it for hours.

Thanks in advance,

Magnus

Answer 1

Below follows what I think is the best way to solve this. I will divide it up in whether or not it is a background image or color we are looking to apply accross the full width.

CSS (formatting for illustration purposes and fixed width)

.content{
    padding:20px;
    border: 1px solid #269abc;
    background:#d6ec94;
}
[class*="col-"] {
    padding-top:10px; /* 15px side paddings automatically applied */
    padding-bottom:10px;
    border: 1px solid grey;
    background: transparent;
}
.fixed-width {
    display:inline-block;
    float:none;
    width: 300px;
}

The key here is the fixed-width class, and follows your approach (2). The other styles are just so you can try it and easily see how it works.

CSS (background image)

#one {
    background-image: url([insert-url]);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
}

The key here is the background-size: contain element. As long as the width/height ratio of your background image is larger than the section's ratio, the image will fill the full background.

CSS (background color)

#two {
    background-color: grey;
    height:500px;
}

background-color works without any tweaks.

HTML

<section id="one">
    <div class="container">
        <div class="row text-center">

            <div class="col-sm-4 fixed-width">
                <div class="content">HERE</div>
            </div>

            <div class="col-sm-4 fixed-width">
                <div class="content">HERE</div>
            </div>

            <div class="col-sm-4 fixed-width">
                <div class="content">HER</div>
            </div>

        </div>
    </div>
</section>

As seen, by adding a <section> around the container, you can apply the background image or color to the full width of the page.

Answer 2

IN Bootstrap,

Col-lg is large screen, Col-sm is small screen, Col-md is medium devices, Col-xs is Small screen.

According to the browser ,we can use the all classes.In my experience we can use the col-lg-offset-3 for large screen,Remaining screen we should use without offset,like us,

UL list format:

<style>
   ul{
     margin:0;padding:0;
     text-align:center;
    }
   ul li
  {
     display:inline-block;
     text-align:center;
     width:300px;
   }
</style>
    <ul>
       <li>box1</li>
       <li>box2</li>
       <li>box3</li>
    </ul>

whatever screen all list will come in center position of screen.

other format:

<div class="container">
   <div class="row text-center"> 
    <div class="col-lg-offset-3 col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
    <div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
    <div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
  </div>
</div>

we should use all classes to our business requirement.if we can alter-ate the various offset class for col-sm-offset-,col-md-offset.,

Answer 3

<div class="col-sm-4 col-xs-12">

Is the important line. The col-sm-4 is saying on small screens and above, take up 4 of 12 bootstrap columns. So, try decreasing this to 3 of 12 bootstrap columns, i.e. col-sm-3. Here it is within the example source code:

 <div class="col-sm-3 col-xs-12">
  <div class="panel panel-default text-center">
    <div class="panel-heading">
      <h1>Basic</h1>
    </div>
    <div class="panel-body">
      <p><strong>20</strong> Lorem</p>
      <p><strong>15</strong> Ipsum</p>
      <p><strong>5</strong> Dolor</p>
      <p><strong>2</strong> Sit</p>
      <p><strong>Endless</strong> Amet</p>
    </div>
    <div class="panel-footer plan">
      <h3>$19</h3>
      <h4>per month</h4>
      <button class="btn btn-lg">Sign Up</button>
    </div>
  </div>