How do I access certain column in bootstrap grid system? - html

Question

In the bootstrap grid system, there are 12 columns and col - *- * class is used to group together certain number of columns. But when I want to use the first 3 columns and then just the last column how do I do that, that is, how can I use certain columns and not others in a single row class?
Like when I make a page header, I give the title on the left hand side and certain other text on the right side of the header, I assume I can use the grid system here effectively, given that I can access certain columns.

Answer 1

Use the .offset-* class (.col-md-offset-* class for versions older than 4.0.0). For instance, occupy first 4 cols, and only the last 2 cols as follows:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 offset-md-6">.col-md-6 .offset-md-2</div>
</div>
Bootstrap v4.0.0-alpha.6
.b { background: #CCC; height: 80px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="b col-sm-4"></div>
<div class="b offset-sm-6 col-sm-2"></div>
</div>
</div>
Bootstrap v3.3.7
.b { background: #CCC; height: 80px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="b col-xs-4"></div>
<div class="b col-xs-offset-6 col-xs-2"></div>
</div>
</div>

Answer 2

First create 3 columns, then 8 columns, after that create the last column and you write the code in only first three and last one like this. think of it like a graph sheet.
<div class="col-md-3">
<!-- things you want in first three columns: code here-->
</div>
<div class="col-md-8">
<!-- leave this blank-->
</div>
<div class="col-md-1">
<!-- things you want in last column : code here-->
</div>

Answer 3

Use with col-md-offset-*.
like this
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Answer 4

If you want three column next to each other and only use the last one you can simply just put in content in the last one like this:
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4">Content here</div>
</div>

Answer 5

If I understand your question correctly, you want to be able to single out specific columns in your row of 12.
<div class='row'>
<div id='first' class='col-sm-4'>
<p>Column 1</p>
<div>
<div id='second' class='col-sm-4'>
<p>Column 2</p>
<div>
<div id='third'class='col-sm-4'>
<p>Column 3</p>
<div>
</div>
If you want to select specific columns, you could give them an id to uniquely identify them. If you would want to select the first and third column and change their background color to lightblue you could do this:
#first, #third{
background-color: lightblue;
}

Answer 6

You will have to use the .col-[xs|md|lg|xl]-offset-* classes in bootstrap, see here
For example, if you want the layout of your page to have only the first 3 columns and the last column containing elements just do:
<div class="row">
<div class="col-md-3">
<span>some text</span>
</div>
<div class="col-md-offset-8 col-md-1">
<span>some more text</span>
</div>
</div>

Answer 7

<div>
<div class="col-md-3" style="text-align:left">
<h1>Title</h1>
</div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3" style="text-align:right">
<p>Description</p>
</div>