CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgrid
whr2206
whr2206

Reputation: 47

Stacked/Nest Columns + Bootstrap Grid

I've been having trouble setting up a simple structure on my website. I'm trying to use bootstrap's grid to organize the content. enter image description here

I want one big column (on the left) for the main news. I want the two columns on the right for other menus and topics. This is the code that I've attempted to use... to no avail:

  <div class="container">
  <div class="row">
      <div class="col-md-12">
          <div class="row">
              <div class="col-md-8">
                <p>Testing</p>
              </div>
              <div class="col-md-4">
                <p>Testing</P>
              </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-md-offset-8">
               <p>Testing</p>
            </div>
          </div>
      </div>
  </div>

Is there an easier way to do this? I feel like this isn't the most simple solution -- and it's not even working the way I want it to, anyways. Any ideas? Thanks for your time!

Upvotes: 0

Views: 57

Answers (2)

Mukesh Ram
Mukesh Ram

Reputation: 6328

You can try this: 

.main{
  border:1px solid #000; 
}
.side .col-sm-12 {
  background:green;
  border:1px solid red
}
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row row-eq-height">
    <div class="col-sm-8 main">
      <div class="">
      
      
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    </div>
    <div class="col-sm-4 side">
      <div class="row">
         <div class="col-sm-12">      
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. 
</div>
      <div class="col-sm-12">      
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. 
      </div>

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

This is reference link: http://getbootstrap.com/getting-started/

Upvotes: 1

GvM
GvM

Reputation: 1733

you can do it like this. 

* {
  padding: 0 !important;
}
.big-div, .small-div {
  border: 2px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="col-xs-8 big-div">
    <span>bigdiv</span>
  </div>
  <div class="col-xs-4 small-div-container">
    <div class="col-xs-12 small-div">
      <span>smalldiv1</span>
    </div>
    <div class="col-xs-12 small-div">
      <span>smalldiv2</span>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions