Bootstrap 3.0: full-color background, compact columns in the center

Question

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

The only problem I ran into was that the columns in the Services, Portfolio and Prices section covered almost the entire page width, which in my opinion looked great, especially for the three price boxes, which, in my opinion, should be much narrower and still focused. Let me take these price scales as an example for questions.

So, I started the task of compressing these three price boxes into a narrower form, concentrated on the page, while maintaining the full background color. I came up with three ways to do this:

1) Place the container inside the liquid container:

<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 changes / changes to 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 layout of the fluid container, but instead of three col-sm-4 I have empty col-sm-3 , three col-sm-2 and finally empty col-sm-3 (12 columns total).

---

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

Instead of 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'm offset). **

---

The problem with both (3) and (4) is that after I remove the browser window, the fields become too small before they are moved to the next line (i.e. the text goes out of the box). In (4), it seems like I'm using container (as opposed to container-fluid ), the boxes get too narrow even in full screen mode.

What is the right way to do this? I suppose this is a problem when almost everyone who makes business sites stumbles, but I could not find the answer on the Internet, working on it for several hours.

Thanks in advance,

Magnus

Answer 1

What follows is what I consider to be the best way to solve this problem. I will analyze it whether this is a background image or the color that we use across the entire width.

CSS (formatting for illustration 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). Other styles are just so you can try 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 ratio of the width and height of your background image is greater than the ratio of the section, the image will fill the full background.

CSS (background color)

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

background-color works without any settings.

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 you can see, by adding a <section> around the container, you can apply a background image or color to the full width of the page.

Answer 2

IN Bootstrap,

Col-lg is a large screen, Col-sm is a small screen, Col-md is a medium device, Col-xs is a small screen.

According to the browser, we can use all classes. In my experience, we can use col-lg-offset-3 for the big screen, the remaining screen, which 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> 

any screen will be displayed in the center of the screen.

another 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 must use all classes for our business requirement. If we can change the various offset classes for col-sm-offset-, col-md-offset.,

Answer 3

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

It is an important line. Col-sm-4 speaks on small screens and above, occupies 4 out of 12 bootstrap columns. So, try reducing this to 3 out of 12 bootstrap columns, i.e. Col-sm-3. Here it is in the source code of the example:

  <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>