How Do I Access Certain Column In Bootstrap Grid System?

May 01, 2023 Post a Comment

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:

<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  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"  />

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

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.

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

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

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:

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

<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;

}

Html5 Pros