1

How can I line up content in bootstrap grid system without having separate row for everything?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container">
       <div class="row">
          <div class="col-sm-3">
               <h1>Some Content</h1>
               <p>More content</p>
               <button>Submit</button>
          </div>
          <div class="col-sm-3">
               <h1>Some Content</h1>
               <p>More content</p>
               <p>More content</p>
               <button>Submit</button>
          </div>
          <div class="col-sm-3">
               <h1>Some Content</h1>
               <p>More content</p>
               <p>More content</p>
               <p>More content</p>
               <p>More content</p>
               <p>More content</p>
               <p>More content</p>
               <button>Submit</button>
          </div>
       </div>
    </div>

Some of the content I have in the paragraphs are longer than the others and the button will be uneven

col-1    col-2    col-3
header   header   header
parag    parag    parag
button   parag    parag
         button   parag
                  button

How can I have the button, paragraph all line up. I used max width on paragraph.

Zachary Craig
  • 2,192
  • 4
  • 23
  • 34
henhen
  • 1,038
  • 3
  • 18
  • 36
  • so you want all **buttons** to appear at the bottom? – Rushikumar Jan 03 '18 at 18:16
  • They are already appearing on the bottom, I just need them to be evenly lined up horizontally. – henhen Jan 03 '18 at 18:18
  • 1
    Possible duplicate of [How can I make Bootstrap columns all the same height?](https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) – Zachary Craig Jan 03 '18 at 18:23
  • henhen: that's what I meant... thank you for editing the question; answer by @apieceofbart should address what you are asking for! – Rushikumar Jan 03 '18 at 18:37

2 Answers2

2

Just simply need to add another row 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
   <div class="row">
      <div class="col-sm-3">
           <h1>Some Content</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="col-sm-3">
           <h1>Some Content</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="col-sm-3">
           <h1>Some Content</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
      </div>
   </div>
   <div class="row">
      <div class="col-sm-3">
          <button>Submit</button>
      </div>
      <div class="col-sm-3">
          <button>Submit</button>
      </div>
      <div class="col-sm-3">
          <button>Submit</button>
      </div>
   </div>
</div>
Luis felipe De jesus Munoz
  • 7,454
  • 2
  • 33
  • 53
2

If you don't want to add another row you could use flexbox on each column and then add margin-top: auto to button.

Here's an example: https://codepen.io/apieceofbart/pen/xpLPRd

apieceofbart
  • 2,048
  • 4
  • 22
  • 30