Bootstrap 3.0: Full-width Color Background, Compact Columns In Center

July 30, 2023 Post a Comment

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 diffe

Solution 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

<sectionid="one"><divclass="container"><divclass="row text-center"><divclass="col-sm-4 fixed-width"><divclass="content">HERE</div></div><divclass="col-sm-4 fixed-width"><divclass="content">HERE</div></div><divclass="col-sm-4 fixed-width"><divclass="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.

Solution 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;
    }
   ulli
  {
     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:

<divclass="container"><divclass="row text-center"><divclass="col-lg-offset-3 col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div><divclass="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div><divclass="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.,

Solution 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">
  <divclass="panel panel-default text-center"><divclass="panel-heading"><h1>Basic</h1></div><divclass="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><divclass="panel-footer plan"><h3>$19</h3><h4>per month</h4><buttonclass="btn btn-lg">Sign Up</button></div></div>

Html5 Tutorial