CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
onedkr
onedkr

Reputation: 3386

Custom column size on bootstrap (without affect responsive design)

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 ?

Upvotes: 4

Views: 3896

Answers (4)

Morteza Mohammadi
Morteza Mohammadi

Reputation: 13

i have a solution for this and use it for my project you can make a file in sass directory with own name and add to main bootstrap sass file first open _bootstrap.scss file and add this to last line 

 @import "bootstrap/my-responsive";

my-responsive is your file name

and put your custom css to that file (_my-responsive.scss) for any customize responsive size bootstrap screen like this put your css for col-sm (small screen)

@media screen and  (min-width: $screen-sm-min){ your own css }

this css just load in sm size with bootstrap standard size

for example 

@media screen and  (min-width: $screen-sm-min){ .leftMenu {width:20px} }
@media screen and  (min-width: $screen-md-min){ .leftMenu {width:55px} }

in this case finaly you have one class with 20px width in sm screen and 55px in md screen so your responsive is ok and has your specific size

Upvotes: 1

Alessio Cantarella
Alessio Cantarella

Reputation: 5201

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.

Upvotes: 2

User_3535
User_3535

Reputation: 852

Assign width to the div

<div class="row">
    <div class=" col-md-1 col-sm-1 well leftMenu " style="width:15px;"></div>
    <div class="col-md-7 col-sm-7 well main "></div>
    <div class="col-md-4 col-sm-4 well rightMenu "></div>
  </div>

Demo

Upvotes: 1

Prabhakaran
Prabhakaran

Reputation: 1544

.parentdivClass .row .col-md-1.col-sm-1.leftMenu{
/*your style*/
}

this CSS solve your problem but the responsiveness of the bootstrap will get affected for sure.

Upvotes: 1

Related Questions