How to work with twitter bootstrap?

Question

Of course this is a stupid question. But, my question is: how shall I style individual div containers in twitter bootstrap? apart from it default styling, how can I apply my own style?

for instance: <div class='span8'></div>

how can I apply my own style to the above tag when it already has a class?

http://stackoverflow.com/questions/14884523/can-a-div-have-multiple-classes-twitter-bootstrap — Enigmadan, Jul 26 '13 at 19:40

score 6 · Answer 1 · answered Jul 26 '13 at 19:40

Well, you can add the classes you want:

<div class='span8 myCustomClass'></div>

You can define your custom stylesheet after the bootstrap declaration

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"/>
<!-- My Style -->
<link href="css/myStyleSheet.css" rel="stylesheet" media="screen"/>

Yuriy Galanter · Answer 2 · 2013-07-26T19:45:54.057

3

HTML element can have multiple classes assigned:

<div class='span8 myClass1 myClass2'></div>

And of course you can always assign inline style (not really recommended, but sometimes is needed, and it takes priority over class style):

<div class='span8' style='font-weight:bold;color:red'></div>

edited Jul 26 '13 at 19:45

answered Jul 26 '13 at 19:40

Yuriy Galanter

38,833
15
69
136

Please mark as answered if this is what you were looking for. – Yuriy Galanter Jul 26 '13 at 21:43

Ankit Aggarwal · Answer 3 · 2013-07-26T21:17:32.707

Have to override the span8 class by writing the desired css with your requirement. Which ever property you want to override with the existing property just the !important keyword in your css.

Suppose:-

   .span8
{
width:200px;
height:100px;
border:1px solid #f00;
}

Now you want to override this width your desired width,make one more class

.override_class
{
width:500px!important;
border:1px solid #aaa!important;
}

html for dis will be

<div class="span8 override_class"></div>

How to work with twitter bootstrap?

3 Answers3