Custom column size on bootstrap (without affect responsive design)

Question

I would like to create on my page a really tiny left menu with bootstrap like this :

<div class="row>
    <div class="col-md-1 col-sm-1 leftMenu"></div>
    <div class="col-md-7 col-sm-7 main"></div>
    <div class="col-md-4 col-sm-4 rightMenu"></div>
</div>

However col-md-1 is too large for my menu. I would like a width equal to 50px;

I don't find a solution to have a menu with a size inferior to the minimal column, without affect the responsive design of my page

Anyone have an answer to my problem ?

Answer 1

If you want to keep using Bootstrap, you could define new columns widths, e.g. 0.5 / 12 and 7.5 / 12:

col-md-0-5 | col-md-7-5 | col-md-4
col-sm-0-5 | col-sm-7-5 | col-sm-4

If you check the bootstrap.css file, you can define the new col-md-0-5 and col-md-7-5 classes as follows:

.col-md-0-5, .col-md-7-5 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 992px) {
    .col-md-0-5, .col-md-7-5 {
        float: left;
    }
    .col-md-0-5 {
        width: 4.16666667%;
    }
    .col-md-7-5 {
        width: 62.5%;
    }
}

Just follow the same logic to define the new col-xs-0-5 and col-xs-7-5 classes.