How to Style Bootstrap Col-Lg-* Classes

How to style bootstrap col-lg-* classes?

With Less:

One of the options would be to basically create a Less loop like in the below code sample. However, the problem is that the number is fixed and so it would (a) statically generate as many classes as the number (which means bloated code) and (b) if class has a higher suffix value, it won't be covered.

.loop(@count) when (@count > 0){ // execute the function only when condition matches.
  .loop(@count - 1); // call the iteration again with a decremented count
  .col-lg-@{count}:before { // using selector interpolation to add the count number
    content: "Column-div";
    color: #28a4c9;
    }
}

.loop(100); // call the loop with the no. of iterations as the parameter

Codepen Demo

---

With pure CSS:

There is also a pure CSS alternate for this kind of pattern matching. You can make use of any one of the CSS3 Attribute Selectors depending on your needs. A few samples are available in the snippet.

[class^='col-lg']:before { /* class name starts with col-lg */  content: "Column-div";  color: yellow;}[class$='col-lg']:before { /* class name ends with col-lg */  content: "Column-div2";  color: beige;}[class*='col-lg']:before { /* contains col-lg in class name */  background: chocolate;}
/* Just for demo */
div:before{  display: block;}

<div class='col-lg-1'></div><div class='col-lg-2'></div><div class='col-lg-3'></div>
<div class='a-col-lg'></div><div class='b-col-lg'></div><div class='c-col-lg'></div>

Bootstrap Column Classes by Example

When using Bootstrap, you can use different classes for different devices. Let's use the example below:

<div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12">Column 1</div>
    <div class="col-lg-4 col-md-6 col-sm-12>Column 2</div>
    <div class="col-lg-4 col-sm-6 col-sm-12">Column 3</div>
</div>

While you are on a large device (screens equal to or greater than 1200px wide) your screen will be filled with 3 columns in a row.

When using a medium device (screens equal to or greater than 992px wide) your first 2 columns will be next to each other with a width of 50%. And the 3th column will be underneath it with a width of 100%.

When visiting the website using a smaller device (screens equal to or greater than 768px wide) all columns will have a width of 100%.

This way you can use one line of code, and declare the right sizes for all devices.

Use same col-md-* and col-lg-* for all instances of the class

Bootstrap 5 uses scss and you should use that see here how https://stackoverflow.com/a/73709723/3807365
for example:

// File: my-bootstrap-and-styles.scss

// your overrides
$primary : #FEBC35;

// include bootstrap.scss
@import "../node_modules/bootstrap/scss/bootstrap";   

// Then add your additional custom code here
.my-primary-div {
  background: $primary;
  border: 1px solid black;
}

// also don't forget to take advantage
// of bootstrap's variables and mixins
@include media-breakpoint-down(md) {
    .my-class {
        overflow-y: auto;
    }
}

afterwards it's just a matter of:

.left-column {
    background-color: red;
    @extend .col-lg-3;
    @extend .col-md-6;
    /* Other things */
}

Bootstrap 4: between col-lg and col-md sizes

Instead of

<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">

could you use?

<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12">

Bootstrap 3 change Col-Nesting in MD/LG

Just swap the 2nd and 3rd div and add .pull-right like this

<div class="container">   <div class="row">
    <div class="col-md-12 col-lg-9 text-center">
      <h4>col-md-12 col-lg-9</h4>
    </div>
    <div class="col-sm-6 col-md-3 col-lg-3 text-center pull-right">
      <h4>col-sm-6 col-md-3 col-lg-3</h4>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
    </div>
    <div class="col-sm-6 col-md-9 col-lg-9 text-center">
      <h4>col-sm-6 col-md-9 col-lg-9</h4>
      .<br>
      .<br>
      .<br>
      .<br>
    </div>    </div> </div>

Check demo

For clearing float, check clearfix

Mixing col bootstrap classes in less?

You should import the bootstrap.less file. For this download the full bootstrap project, and copy out the less folder. Then put the less folder in your project. Also make sure to add the less.js file to your project if you want to get your less compiled while your working. Look at lesscss.org for more information.

Example : custom.less

@import "../less/bootstrap.less";

 section {
    .make-row();
}
.left-navigation {
    .make-sm-column(3);
}
.main-content {
    .make-sm-column(9);
}

May be this will work for you.

Is there a bootstrap class to handle all col widths?

No, you can't inherit from another class in CSS, but you can in CSS pre-processors like SASS.

However, using the same col for each breakpoint is unneccessary:

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"></div>

Because, this is the same thing:

<div class="col-xs-6"></div>

Read how the Bootstrap grid classes work.

Bootstrap 4 - The class .col is not working propely

I noticed some errors and here is how to fix it. I will provide simplified version to show where the problem is.

According to bootstrap you need to have the following scheme in your layout.
container → row → col → row → col and so on.

Your layout has container → row → col → col and i suppose this is the problem.

Plus, it is really helpful to add borders so you can easily see the layout and how it behaves.

I hope this solves your problem.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8">
      <div class="row">
      
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">1</article>
        </div>
        
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">2</article>
        </div>
        
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">3</article>
        </div>

      </div>
    </div>
  </div>
</div>

---

Related Topics