CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Popa Andrei
Popa Andrei

Reputation: 338

Bootstrap 3 grid custom class

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!

Upvotes: 1

Views: 4008

Answers (5)

Sajan Parikh
Sajan Parikh

Reputation: 4950

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>

Upvotes: 1

Rahul Singh
Rahul Singh

Reputation: 3427

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.

Upvotes: 0

NIck
NIck

Reputation: 46

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;
}

Upvotes: 0

dlane
dlane

Reputation: 1131

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).

Upvotes: 0

Cisum Inas
Cisum Inas

Reputation: 12990

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.

Upvotes: 0

Related Questions