css not affecting the page when using with bootstrap

Question

I am a newbie to bootstrap. I have developed a weppage using bootstrap3. I'm using these two classes on the same element, but the css is not having any effect:

HTML:

<div class="col-md-4 auminascroll">
    dfgdgdfgdfgsdfgh cxzvdzfhfdbfd fbfddf
</div>
<div class="col-md-4 auminascroll">fghfdghfdhdfhfdsh</div>
<div class="col-md-4 auminascroll">dfgdsgdsfg</div>

Css:

.col-md-4 .auminascroll {

   height: 50px;
   overflow-y: auto; 

}

I am not getting a scroll when using above code. If I put height: 50px; overflow-y: auto; in a style tag, my code works fine. Why is this css not having an effect when using it with this bootstrap class? Is there any problem with my code?

Any help will be greatly appreciated!!!

seeing your html and CSS, the only plausible explanation would be that this CSS file is not loaded (up to you to check if it is) OR that this rule is overruled with a more specific one coming from somewhere else — Laurent S.
– Laurent S., Commented Dec 8, 2014 at 12:57

M1ke · Accepted Answer · 2014-12-08 12:57:03Z

5

You're nearly there! When using a selector to choose two classes there should be no space between the class names - they just need separating with a dot.

.col-md-4.auminascroll { /* no space between the two classes */

 height: 50px;
 overflow-y: auto; 

}

Your code (where there's a space between the two classes: .class-a .class-b would actually look for an element of class-b inside and element of class-a.

<div class="col-md-4">
    <div class="auminascroll">
    </div>
</div>

answered Dec 8, 2014 at 12:57

M1ke

6,4364 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

M1ke Over a year ago

Glad I could help, it can be confusing that multiple classes are separated with a space in HTML, yet a space denotes a descendant class in CSS. (if you'd like any more clarifications please let me know, and if you're happy please accept my answer)

Selva Over a year ago

i try to accept,but the alert shows you cannot accept answer in some minutes.i will accept the answer after time expires

Mahesh Thumar · Accepted Answer · 2014-12-08 13:13:00Z

2

You are using the wrong css selector. You need to use it like:

.col-md-4.auminascroll {

  height: 50px;
  overflow-y: auto; 

}

edited Dec 8, 2014 at 13:13

answered Dec 8, 2014 at 12:57

Mahesh Thumar

4,3955 gold badges24 silver badges30 bronze badges

Collectives™ on Stack Overflow

css not affecting the page when using with bootstrap

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related