Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Twitter Bootstrap

How Can I Place Column Content On The Bottom?

Post a Comment
I have a row with three columns one of which has two buttons. This button row should be placed on the bottom of the column. The question is how do I get this? Thanks in advance. JS

Solution 1:

The problem is that elements with float don't have a fixed height, so you cannot position it at the bottom.

That's why You have to transform into table container, and than transform the columns into table-cells to apply vertical-align:bottom. See this code bellow:

<!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
  
  
		<style>
			.container {
				display: table;
				width: 100%;
			}
			
			.row{
				display:table-row;
			}
			
			.cell{
				display:table-cell;
				float:none;
			}
			
			.cell-bottom{
				vertical-align: bottom;
			}
		</style>
  
</head>

<body>
  <div class="container">
    <div class="row">

      <div class="col-xs-4 cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing 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
      </div>

      <div class="col-xs-4 cell cell-bottom">

        <a class="btn btn-default">
            Button
          </a>

        <a class="btn btn-default">
            Button
          </a>

      </div>

      <div class="col-xs-4 cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing 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
      </div>

    </div>

  </div>
</body>

</html>

Solution 2:

Add this to your CSS:

div.col-xs-4 { position:relative;}
div.col-xs-4 a.btn-default { position:absolute; bottom:0;}

Then all thats left is to align your first button to the left and your second button to the right (give them unique classes or an ID):

div.col-xs-4 a.btn-default.left { left:0;}
div.col-xs-4 a.btn-default.right { right:0;}

Hope that helps!


Post a Comment for "How Can I Place Column Content On The Bottom?"