Twitter Bootstrap Question posted in

How can I use bootstrap display utility classes in CSS file for for element by ID?-Twitter bootstrap

I have several designs that need to use the same html.(I can change the CSS file though.)
How can I use the display utility classes for an element by id in the CSS file?

Here is a code pen example. https://codepen.io/warrenkc/pen/QPVpVR

#wide {
    /* twitter-bootstrap display utility class */ 
    .d-lg-none
}
#small{
    /* twitter-bootstrap display utility class */ 
    .d-none d-lg-block
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you! You guys helped a lot. You are awesome.

    What I ended up doing in my CSS:

    /*Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {

    #wide {
        display: none;
    }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    #wide {
        display: block;
    }
}

  2. 0

    Unfortunately, you can’t do this using vanilla CSS. Like mentioned in the comments, you can do it with preprocessors like Sass/Scss/Less.

    What I would do if I had to achieve this would be to find the code the class you want to use has (easy to do through developer tools > inspect element with the class you want), and then copy paste it where you want to use it.

    It’s not the cleanest solution, but the way to go in your case.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search