bootstrap - go to next column

Question

When the website goes to the -lg- size I want it to look like this:

Desired result:

But I only end up with this:

Actual result:

<div class="container">

  <div id="title" class="col-xs-12 col-md-6 col-lg-4">THE<br/>TITLE</div>  
  <div class="clearfix">
  </div>

  <div id="menu" class="col-xs-12 col-lg-4">MENU<br/>item1<br/>item2<br/>item3</div>

  <div class="content">
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div class="clearfix"></div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Jam<br/>Jam<br/>Jam<br/>Jam</div>
    <div class="clearfix"></div>

  </div>

</div>

Is it possible what I want or is this not an optimal design for bootstrap?

https://jsfiddle.net/clankill3r/0o1mz65n/

score 0 · Answer 1 · answered Apr 20 '16 at 13:45

Add content class to set with col-xs-12 col-lg-8 and content class add left and right padding 0 to set as you like..

#title {
    background-color: aqua;
}

#menu {
  background-color: aquamarine;
}

.content {
  background-color: orange;
  padding-left:0px;
  padding-right:0px;
}

// Small devices (landscape phones, 34em and up)
@media (max-width: 33.9em) { 
  body {
    background-color: rgba(10,10,200,0.2);
  }
}

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { 
  body {
    background-color: rgba(10,10,200,0.1);
  }
}

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { 
  body {
    background-color: rgba(10,10,200,0.2);
  }
}

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { 
  body {
    background-color: rgba(10,10,200,0.3);
  }
}

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { 
  body {
    background-color: rgba(10,10,200,0.4);
  }
}

<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="container">

  <div id="title" class="col-xs-12 col-md-6 col-lg-4">THE<br/>TITLE</div>  
  <div class="clearfix">
  </div>

  <div id="menu" class="col-xs-12 col-lg-4">MENU<br/>item1<br/>item2<br/>item3</div>

  <div class="content col-xs-12 col-lg-8">
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div class="clearfix"></div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Jam<br/>Jam<br/>Jam<br/>Jam</div>
    <div class="clearfix"></div>

  </div>
  
</div>

This causes an inset on Foo, Bar, Ham and Jam. – clankill3r Apr 20 '16 at 14:46 — clankill3r, Apr 20 '16 at 14:46
you can check with "Full page" ? – Mansukh Khandhar Apr 21 '16 at 05:54 — Mansukh Khandhar, Apr 21 '16 at 05:54

score 0 · Answer 2 · answered Apr 20 '16 at 13:55

What about adding col-lg-4 to the content div ?

<div class="container">

  <div id="title" class="col-xs-12 col-md-6 col-lg-4">THE<br/>TITLE</div>  
  <div class="clearfix">
  </div>

  <div id="menu" class="col-xs-12 col-lg-4">MENU<br/>item1<br/>item2<br/>item3</div>

  <div class="content col-lg-4">
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div class="clearfix"></div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Jam<br/>Jam<br/>Jam<br/>Jam</div>
    <div class="clearfix"></div>

  </div>

</div>

https://jsfiddle.net/t528eozd/

Tricky12 · Answer 3 · 2016-04-20T15:37:58.370

0

If you check your version of Bootstrap CSS, you will notice that you are using the wrong class to offset. col-xx-offset-x is the old offset class. Your version is using offset-xx-x (i.e. offset-lg-4).

Also, you only need one offset - on your div containing four Ham's.

Updated JSFiddle

<div class="col-xs-12 col-lg-4 offset-lg-4">Ham
    <br/>Ham
    <br/>Ham
    <br/>Ham
</div>

NOTE - I suggest a cleaner way of setting this up, using the row class instead of clearfix multiple times.

Here is a Demo

EDIT/UPDATE - A more technically correct version using rows and separating the menu into its own col-lg-4 and the Foo, Bar, Ham and Jam into a col-lg-8 that contains two rows. It also eliminates the need for an offset.

Here it is

edited Apr 20 '16 at 15:37

answered Apr 20 '16 at 13:55

Tricky12

6,752
1
27
35

About the wrong class to offset. Is that an issue in the documentation of v4? http://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns – clankill3r Apr 20 '16 at 14:34
Also, ain't it strange from technical viewpoint to put menu in the same row as foo and bar? Also it's even more tricky then I expected but a comment is not the right place to address that issue. – clankill3r Apr 20 '16 at 14:38
@clankill3r It does seem they are slacking on their documentation. My guess is that with alpha.2 they modified the offset class (no clue why?) and forgot to, or haven't yet, updated their documentation. I agree that it is a strange setup for the menu, but your screenshot has the menu in a row with foo and bar, so I left it that way. The best way to create a row of elements in Bootstrap is to use the `row` class, and adjust the columns inside with `col-xx-xx` classes. – Tricky12 Apr 20 '16 at 14:51
@clankill3r I found this issue on the bootstrap issue tracker - https://github.com/twbs/bootstrap/issues/19368. It looks like you have the v4-dev version, which is a bit further along than the documentation. – Tricky12 Apr 20 '16 at 15:24

bootstrap - go to next column

3 Answers3