How Do I Access Certain Column In Bootstrap Grid System?

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 jus

Solution 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:

<divclass="row"><divclass="col-md-4">.col-md-4</div><divclass="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; }

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"crossorigin="anonymous"><divclass="container"><divclass="row"><divclass="b col-sm-4"></div><divclass="b offset-sm-6 col-sm-2"></div></div></div>

Bootstrap v3.3.7

.b { background: #CCC; height: 80px; }

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  /><divclass="container"><divclass="row"><divclass="b col-xs-4"></div><divclass="b col-xs-offset-6 col-xs-2"></div></div></div>

Solution 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.

<divclass="col-md-3"><!-- things you want in first three columns: code here--></div><divclass="col-md-8"><!-- leave this blank--></div><divclass="col-md-1"><!-- things you want in last column : code here--></div>

Solution 3:

Use with col-md-offset-*.

like this

<divclass="row"><divclass="col-md-4">.col-md-4</div><divclass="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div></div><divclass="row"><divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div><divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div></div><divclass="row"><divclass="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div></div>

Solution 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:

<divclass="row"><divclass="col-md-4"></div><divclass="col-md-4"></div><divclass="col-md-4">Content here</div></div>

Solution 5:

If I understand your question correctly, you want to be able to single out specific columns in your row of 12.

<divclass='row'><divid='first'class='col-sm-4'><p>Column 1</p><div><divid='second'class='col-sm-4'><p>Column 2</p><div><divid='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;

}