Bootstrap grid is not working

Question

I am trying to create a page layout using bootstrap. My layout something similar to below image.

enter image description here

To archive for this I tried using bootstrap grid fuctions.

This is how my html look like

  <div class="myLayout">
    <div class="col-1">
    </div>    
    <div class="col-2">
    </div>    
    <div class="col-3">
    </div>
  </div>

In my less file

.myLayout {
  .make-row();
  
  .col-1 {
    .make-md-column(6);
    .make-sm-column(7);
    .make-xs-column(12);
    background: black;
    height: 100px;
  }  
  
  .col-2 {
    .make-md-column(3);
    .make-sm-column(5);
    .make-xs-column(6);
    background: blue;
    height: 100px;
  }  
 
  .col-3 {
    .make-md-column(3);
    .make-sm-column(0);
    .make-xs-column(6);
    .visible-lg-block;
    background: red;
    height: 100px;
  }
}

UPDATE:

This is generating CSS from about Less

.col-1 {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
    background: black;
  height: 100px;
}

@media (min-width: 992px) {
  .col-1 {
    float: left;
    width: 50%;
  }
}
@media (min-width: 768px) {
  .col-1 {
    float: left;
    width: 58.33333333%;
  }
}
@media (min-width: 1200px) {
  .col-1 {
    height: 292px;
  }
}

.col-2 {
  position: relative;
  float: left;
  width: 50%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
    background: blue;
  height: 100px;
}

@media (min-width: 992px) {
  .col-2 {
    float: left;
    width: 25%;
  }
}
@media (min-width: 768px) {
  .col-2 {
    float: left;
    width: 41.66666667%;
  }
}
@media (min-width: 1200px) {
  .col-2 {
    height: 292px;
  }
}

.col-3 {
  position: relative;
  float: left;
  width: 50%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  display: none !important;
    background: red;
  height: 100px;
    
}
@media (min-width: 992px) {
  .col-3 {
    float: left;
    width: 25%;
  }
}
@media (min-width: 768px) {
  .col-3 {
    float: left;
    width: 0%;
  }
}
@media (min-width: 1200px) {
  .col-3 {
    display: block !important;
  }
}

But this is not working for my expecting result. Can somebody tell me what is wrong in my code? Thank you.

I'm not convinced that 0 is an acceptable value for the `make-sm-column()` mixin in .col3 — Joe, Dec 19 '14 at 15:27
@Joe Yes dear, I tried removing it. but not working. Only displaying first 2 columns in every screen sizes. — TNK, Dec 19 '14 at 15:30
I want to display red color column in large desktop size only. — TNK, Dec 19 '14 at 15:33
Why not just use the existing bootstrap classes, rather than re-make the columns in your own styles? (ie: give the first column a class of `col-1 col-md-6 col-sm-7 col-xs-12`? — Blake Mann, Dec 19 '14 at 15:45
Your `.make-*-column` order is incorrect (see http://stackoverflow.com/a/27442489/2712740). — seven-phases-max, Dec 19 '14 at 18:59

score 5 · Answer 1 · edited Dec 19 '14 at 15:57

5

There shouldn't be any need for custom CSS/LESS code to make this happen. You can do it with the existing Bootstrap grid system classes.

BOOTPLY

div {
  height: 200px;
}
.first {
  background-color: black;
}
.second {
  background-color: blue;
}
.third {
  background-color: red;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="first col-sm-6 col-xs-12"></div>
<div class="second col-lg-3 col-sm-6 col-xs-12"></div>
<div class="third col-lg-3 visible-lg-inline"></div>

edited Dec 19 '14 at 15:57

Carrie Kendall

11,124
5
61
81

answered Dec 19 '14 at 15:48

MattD

4,220
2
34
44

3

I changed your code to a code snippet so you don't have to rely on bootply (as it seems to be down now and quite often). – Carrie Kendall Dec 19 '14 at 16:00
Yeah, saw the notification come through. I'll have to look into that more. Thanks! – MattD Dec 19 '14 at 16:01
Yes, its working.. But I want to keep my markup clean without using more classes and IDs. Thats why I am using CSS/LESS to make this happen – TNK Dec 19 '14 at 16:05
going through your classes I tried again changing my `less` but then its not working – TNK Dec 19 '14 at 16:07
2

@TNK And yet by wanting that, you're making your LESS more complicated than it has to be. You're literally favoring messy, needlessly complicated LESS code in an effort to keep the HTML a bit cleaner. Don't reinvent the wheel, and don't do more work than you have to in order to achieve your goal. – MattD Dec 19 '14 at 16:08
3

@TNK that's a flawed and dangerous way of thinking. classes and ids don't make markup _dirty_. They have a job of identifying elements so they can be referred to in other resources. Furthermore, you shouldn't be loading a fairly heavy frontend framework if you're worried about the amount of classes you'll be using – Carrie Kendall Dec 19 '14 at 16:09

Bootstrap grid is not working

1 Answers1