CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
WJA
WJA

Reputation: 7004

Bootstrap grid two columns multiple rows on one column

I am trying to replicate the grid as on this page:

https://www.firebase.com/blog/

As you can see there are two main columns (left and right)

The left column contains multiple rows, whereas the right column only one and is vertically aligned to the top.

How do I achieve this with Bootstrap?

I tried the following:

<div class="row">
            <div class="col-md-12">


                    <!-- LEFT -->
                    <div class="col-md-8 blog-post article"
                        ng-repeat="(key, blogpost) in blog.Posts">

                            <h1 class="text-left">{{blogpost.title}}</h1>
                            <p class="small text-left">{{blog.formatTimestamp(blogpost.date)}} 
                                <!--
                                &nbsp;&nbsp;
                                <span class="text-small">{{key}}</span>
                                -->
                            </p>

                            <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left"></div>

                    </div>



                    <!-- RIGHT -->
                    <div class="col-md-4" style="vertical-align: top !important">
                        Right text
                    </div>


            </div>
        </div>

Upvotes: 0

Views: 3126

Answers (2)

vanburen
vanburen

Reputation: 21663

You're on the right track but I think what you're trying to do is place your blog excerpts inside 8 columns (to the left) and use the remaining 4 columns for a sidebar to the right.

You can nest a 12 column row inside of an 8 column row (the reverse of what you have now) and then place the other 4 column sidebar after the nesting is done.

This will keep your loop separated from the right on wider screens so it will continue to list the posts while keeping the sidebar in place until the viewport is reduced, then the sidebar will collapse underneath the post list.

See Nesting Columns

See the 2 examples inside the Snippet at Full Page, then reduce your browser.

  1. 1) Simple example of the template
  2. 2) what it would be rendered. (CSS is just for the example.)

.article {
  text-align: left;
}
.sidebar-right {
  margin-top: 20px;
  padding: 0;
}
.markdown-custom p {
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 200%;
  padding: 15px;
}
.sidebar-right p {
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 200%;
}
.read {
  font-size: 16px;
}
.recent {
  margin-top: 20px;
}
.recent h4 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
}
.recent a {
  font-size: 12px;
  color: #444;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<h2 class="alert alert-info">Template Loop</h2>

<div class="container">
  <div class="row">
    <div class="col-md-8 blog-post article">
      <div class="row">
        <div class="col-md-12" ng-repeat="(key, blogpost) in blog.Posts">
          <h1>{{blogpost.title}}</h1>

          <p class="small text-left">{{blog.formatTimestamp(blogpost.date)}}</div>
        <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom"></div>
      </div>
    </div>
    <div class="col-md-3 col-md-offset-1">
      <div class="sidebar-right">{{sidecontent}}</div>
    </div>
  </div>
</div>
<hr>
<h2 class="alert alert-success">Rendered Example</h2>

<hr>
<div class="jumbotron">
  <div class="container">
    <h1>Some Blog</h1>

  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-8 blog-post article">
      <div class="row">
        <div class="col-md-12" ng-repeat="(key, blogpost) in blog.Posts">
          <h1>A Blog Title 1</h1>

          <p class="small text-left">November 1st, 1002</div>
        <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left">
          <p>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</p>
        </div>
        <div class="col-md-12" ng-repeat="(key, blogpost) in blog.Posts">
          <h1>A Blog Title 2</h1>

          <p class="small text-left">September 25th, 1002</div>
        <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left">
          <p>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</p>
        </div>
        <div class="col-md-12" ng-repeat="(key, blogpost) in blog.Posts">
          <h1>A Blog Title 3</h1>

          <p class="small text-left">August 5th, 1002</div>
        <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left">
          <p>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</p>
        </div>
        <div class="col-md-12" ng-repeat="(key, blogpost) in blog.Posts">
          <h1>A Blog Title 4</h1>

          <p class="small text-left">July 5th, 1002</div>
        <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left">
          <p>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</p>
        </div>
        <div class="col-md-12" ng-repeat="(key, blogpost) in blog.Posts">
          <h1>A Blog Title 5</h1>

          <p class="small text-left">June 5th, 1002</div>
        <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left">
          <p>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</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-md-offset-1">
      <div class="sidebar-right">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p><a class="read" href="#">Learn More</a>

        <div class="recent">
          <h4>Recent Articles</h4>

          <p><a href="#">Lorem Ipsum is simply</a> 
          </p>
          <p><a href="#">Lorem Ipsum is Lorem Ipsum is simply</a> 
          </p>
          <p><a href="#">Lorem Ipsum Lorem simply</a> 
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 3

Jack Guy
Jack Guy

Reputation: 8523

It's good to have an understanding of how the Bootstrap grid system works. In your example, there is no need for the wrapper .col-md-12. In general, you'll want to place your columns in a .container element of some sort, and put them inside one .row, like so.

<div class="container">
  <div class="row">
    <!-- LEFT -->
    <div class="col-md-8 blog-post article" ng-repeat="(key, blogpost) in blog.Posts">
      <h1 class="text-left">{{blogpost.title}}</h1>
      <p class="small text-left">{{blog.formatTimestamp(blogpost.date)}}
      </p>
      <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left"></div>
    </div>

    <!-- RIGHT -->
    <div class="col-md-4">
      Right text
    </div>
  </div>
</div>

http://codepen.io/anon/pen/bVmPPV

Content that you place inside those columns will start at the top and move downward, just like in the firebase blog. There's no need for custom styling.

Upvotes: 1

Related Questions