Bootstrap 3 grid custom class - html

Question

I'm using Bootstrap 3 to design a website, and I would like to ask how could I apply a custom class to an existing col-md-12 for example, so I won't use ids (#cusom-name) ?
should I write my css like
.col-md-12 test {
background: blue;
padding-left: 10px;
}
and my html like:
<div class="col-md-12 test">div content</div>
or should I just stick to something like using a standard col-md-12 and inside it use my custom class with a new div? like
<div class="col-md-12">
<div class="test">
test content
</div>
</div>
I hope it's clear enough... thanks!

Answer 1

In your HTML, load your custom stylesheet file AFTER you load the Bootstrap 3 stylesheet file. Don't ever edit Bootstrap's files, as updating will become difficult.
Then, in your stylesheet just define the class as normal, on its own.
.blue-bg {
background: blue;
padding-left: 10px;
}
Then, as you already have in your HTML, us it like this;
<div class="col-md-12 blue-bg">
div content
</div>
What this will do is apply all the styles from both .col-md-12 (defined by Bootstrap) and .blue-bg (defined by you).
The reason we load your stylesheet last, is for conflicts. If both you and Bootstrap are defining a property. For example, Bootstrap sets the background to red, and then you set it to Blue. Whatever the last stylesheet says, will be obeyed.
In this way, you can define yet another class;
.red-bg {
background: red;
padding-left: 10px;
}
Then use them both as often as you like, however you want. Consider this.
<div class="row">
<div class="col-md-6 blue-bg">
Div with a blue background.
</div>
<div class="col-md-3 red-bg">
Div with a red background.
</div>
<div class="col-md-3 blue-bg">
Another div with a blue background.
</div>
</div>

Answer 2

Just write it like this in your own CSS:
.test {
background: blue;
padding-left: 10px;
}
And like this in the html:
<div class="col-md-12 test">
<p>test content</p>
</div>
Don't change bootstraps css because then it will be harder to update it later on, insteed work with a css you create which overwrites bootstraps rules.

Answer 3

It really depends on what you are styling really. As well as your code style. You could add another modify class to the .col-md-12 class, or nest another class inside that container. There isn't an always or never answer for modifiers. And by modifiers, I mean overrides on BS3's default/core classes.
Also, in your example code, you forgot the period before test. It should be like this if you're going to nest that class inside:
.col-md-12 .text {}
Because .col-md-12 is a grid component, I think it makes sense to nest a div.test inside that component to not muddy up the context of what that element does, or how it behaves. An example that could have unwanted effects would be if you added padding to all .col-md-12 in your app, instead of the one off use of padding. To add the padding in this case, you could nest .test inside of .col-md-12, and add padding to .test (instead of the grid element). In my opinion, you'd have a nice separation of code and it's use. Also, you might be able to use that newly created .test class in other places of your app.
There are a lot of ways to organize your CSS, and keep elements together based on purpose. If you're interested in some reading, you might check out this resource: http://smacss.com/ (among others).

Answer 4

In CSS, you can have properties that will be set for both classes only, but there shouldn't be a space between the class names, as you have. It should be:
.col-md-12.test {
background: lightblue;
padding-left: 10px;
}

Answer 5

you don't need to add additional div, u can have
<div class="col-md-12 test">div content</div>
and define new as well as u can also override bootstrap css for col-md-12 but if u apply directly on it , it will applicable to everwhere where u have used this bootstrap class. so its better to add your custom css on .test e.g
.test {
width: 80%;
padding: 2%;
}
and if your custom css is not overriding bootstraps css u can use !important e.g.
.test {
width: 80% !important;
padding: 2% !important;
}
Defining a rule with the !important 'attribute' discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.