Create a grid of 10 columns with bootstrap

Question

Is it possible to create a 10 column layout with bootstrap? col-md-1 gives 12 and col-md-2 gives 6, but I need 10. How can I achieve that? Are there any css "hacks" for this?

I was thinking about pasting 2 5 column grids next to eachother (from this question/answer), but I'm not sure how to approach that.

@ehsan Because bootstrap always needs to add up to 12. So 12 times col-md-1 gives a column of 12, while 12 of col-md-2 gives 2 columns of six. — twan, Jun 21 '17 at 09:21
maybe just inside your 12 column grid you can create a special class like you said col-md-2-5, and set width to 10% — Horken, Jun 21 '17 at 09:23
@ehsan I need a 10 column layout with bootrstap (centered, and responsive). — twan, Jun 21 '17 at 09:25

score 7 · Accepted Answer · answered Jun 21 '17 at 09:47

BOOTSTRAP 3: If you want with on full width you can use this aproach.

But instead of 20% (1/5 *100%) you have to use: 10%:

.col-xs-1-10,
.col-sm-1-10 {
  position: relative;
  min-height: 1px;
}

.col-xs-1-10 {
  width: 10%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-1-10 {
    width: 10%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-1-10 {
    width: 10%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-1-10 {
    width: 10%;
    float: left;
  }
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-1-10">
    1
  </div>
  <div class="col-xs-1-10">
    2
  </div>
  <div class="col-xs-1-10">
    3
  </div>
  <div class="col-xs-1-10">
    4
  </div>
  <div class="col-xs-1-10">
    5
  </div>
   <div class="col-xs-1-10">
    6
  </div>
    <div class="col-xs-1-10">
    7
  </div>
  <div class="col-xs-1-10">
    8
  </div>
  <div class="col-xs-1-10">
    9
  </div>
  <div class="col-xs-1-10">
    10
  </div>
</div>

BOOTSTRAP 4: Use this aproach.

score 2 · Answer 2 · edited Jun 21 '17 at 10:33

Just like the question/answer you linked, create 10 columns (instead of 5), with the first column having an offset like this:

div[class^="col-xs-1"] {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-xs-1 col-xs-offset-1">1</div>
    <div class="col-xs-1">2</div>
    <div class="col-xs-1">3</div>
    <div class="col-xs-1">4</div>
    <div class="col-xs-1">5</div>
    <div class="col-xs-1">6</div>
    <div class="col-xs-1">7</div>
    <div class="col-xs-1">8</div>
    <div class="col-xs-1">9</div>
    <div class="col-xs-1">10</div>
</div>

Hope this is what you are aiming for.

score 1 · Answer 3 · answered Jul 12 '17 at 13:15

1

i've created a 10 column bootstrap layout with 10% options for use feel free to use https://github.com/markroze/boostrap_10_column

answered Jul 12 '17 at 13:15

Mark Rozovsky

23
4

Deblue · Answer 4 · 2019-03-30T01:59:17.033

Actually, we can customize the length of columns in the grid system using the source code of Bootstrap and Sass. Read here

First, create a scss file named myBootstrap.scss and type in:

$grid-columns: 10;

Next, download the source code of Bootstrap and import it in the scss file:

@import "bootstrap-4.3.1/scss/bootstrap" // bootstrap.scss is the file you need to import.

Then, we have this in myBootstrap.scss:

$grid-columns: 10;

@import "bootstrap-4.3.1/scss/bootstrap";

Finally, install Sass and compile it into myBootstrap.css in the command line or you can do it in your way:

sass myBootstrap.scss myBootstrap.css

Now, just replace your original css of Bootstrap with myBootstrap.css:

<link rel="stylesheet" href="myBootstrap.css">

Done. You can read more in Theming Bootstrap

Create a grid of 10 columns with bootstrap

4 Answers4