CODEWITHSUNDEEP
twitter-bootstrap-3
Paul Brennan
Paul Brennan

Reputation: 63

Bootstrap 3 - Half Columns Trouble

I've recently encountered a problem in where I am trying to achieve: 0.5 col | 11 col | 0.5 col I've looked at similar questions and found two methods that are mentioned:

Nesting: 

<div class="col-xs-1">
    <div class="col-xs-6">0.5 col</div>
        <!-- 11 col here from 'master' !-->
</div>
<div class="col-xs-11">
     test
</div>
<div class="col-xs-1">
    <div class="col-xs-6">0.5 col</div>
</div>

As you may see, I'm unsure on how to achieve the 11 col of the page after the 0.5 col in nesting them.

Bootstrap sass files:

.col-xs-half {
   @extend .col-xs-1;
   width: percentage((0.5 / $grid-columns));
}

However, this does not work and when set thinks col-xs-11 is the starting position.

Any help would be much appreciated.

Upvotes: 0

Views: 96

Answers (1)

Littlee
Littlee

Reputation: 4327

you can build a custom version of bootstrap here

https://getbootstrap.com/docs/3.3/customize/#grid-system

change 12 column to 24 column

and you can put the code below in your html

<div class="col-md-1"></div>
<div class="col-md-22"></div>
<div class="col-md-1"></div>

Upvotes: 1

Related Questions