How to centrally assign a same CSS class to multiple elements, such as when using frameworks like Bootstrap?

Question

I have just started studying web development and tried a couple of front-end frameworks such as Bootstrap, 960 and Foundation.

For example with Bootstrap, when several images are to be universally assigned a same set of classes, for now I find it necessary that all these classes be placed within each elements individually, such as :

<div id="foo" class="container">
    <img src="img1.jpg" class="thumbnail img-responsive etc etc"/>
    <img src="img2.jpg" class="thumbnail img-responsive etc etc"/>
    <img src="img3.jpg" class="thumbnail img-responsive etc etc"/>
    <img src="img4.jpg" class="thumbnail img-responsive etc etc"/>
    <img src="img5.jpg" class="thumbnail img-responsive etc etc"/>
</div>

Have anyone feel this inconvenient? I feel having to do this sort of steers away from the need which stylesheet emerges from: to separate style from structure and avoid repetition.

I wish I could select all the img in #foo, and give all of them a same set of class.I believe there ought to be a way of doing this, only that I don't know. Any ideas folks?

Have you seen http://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes — Boris Kladov, Jul 21 '14 at 21:48

score 5 · Accepted Answer · answered Jul 21 '14 at 21:45

5

Make use of the framework's CSS preprocessor (e.g. Less, Sass, etc.)

In Less, your example could be:

@import "bootstrap/less/bootstrap.less";
#foo img {
  .thumbnail;
  .img-responsive;
}

answered Jul 21 '14 at 21:45

cvrebert

9,075
2
38
49

The other js solution also works, however I think this can be a more permanent and safe approach because there won't be an issue of js being disabled by the browser. Am I right? I'm looking into Less right now. Thanks! – nicobili Jul 22 '14 at 01:28
1

@bilibili You normally use Less/Sass/etc. in your dev environment or on your server, **not client-side**. Read the getting started docs. – cvrebert Jul 22 '14 at 04:01

score 1 · Answer 2 · answered Jul 21 '14 at 21:38

1

You can do this with jQuery. It would look like this:

$(document).ready(function(){
    $('#foo img').addClass('classname');
)};

answered Jul 21 '14 at 21:38

APAD1

13,509
8
43
72

1

I tried it an it easily worked! Thanks! Next time I try something like changing between different styling I'd definitely use this method. I wish I have enough rep to upvote. – nicobili Jul 22 '14 at 01:26

score 0 · Answer 3 · answered Jul 21 '14 at 21:38

0

In your <head>, load your bootstrap CSS first:

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">

Then load a custom CSS file

<link href="css/my_custom_css.css" rel="stylesheet"> //assumes you have a css folder and then name your file, in this example it's named my_custom_css.css

In your custom file define your custom CSS

#foo img { //will affect img under id="foo"
   margin: 0px; //just an example
   //whatever styles you want to define
}

answered Jul 21 '14 at 21:38

Dan

9,391
5
41
73

Thanks but what really has been bothering me is to assign class to elements(in order to use pre-defined styles from Bootstrap), rather than give my own style to them. – nicobili Jul 21 '14 at 21:43
That's why PHP and other object oriented languages make this easier. You can have an array with your image names and then echo them using a loop where you only have to write the class names once. – Dan Jul 21 '14 at 21:45

How to centrally assign a same CSS class to multiple elements, such as when using frameworks like Bootstrap?

3 Answers3