CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Arwen
Arwen

Reputation: 205

How to prevent Bootstrap buttons from inheriting from each others class?

I have a class container which holds a slideshow with a button. The button is located on the slideshow and changes its size with the responsiveness of the webpage . Right underneath a slideshow I want to center three more buttons. But no matter what I do the buttons keep inheriting the CSS from each other which results in my slideshow button being no longer responsive. When I shrink the screen the button keeps moving to the bottom of the screen overlapping my newly created three buttons. How can I fix this issue? How can I prevent my buttons from inheriting each others classes?

HTML:

<div class="container">
        <button type="button" class="btn btn-default btn-lg active"><span   style="color:#FFFFFF">Button Text</span></button>
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="images/sample1.jpg" alt="Sample Image" />
                <img src="images/sample2.jpg" alt="Sample Image"/>
                <img src="images/sample3.jpg" alt="Sample Image"/>
            </div>
        </div>
    <div class="center-buttons">
        <div class="col-md-3 " style="min-height: 200px; background-color: red;">
            <button type="button" class="btn btn-security">Button Text</button>
        </div>
        <div class="col-md-3 " style="min-height: 200px; background-color: yellow;">
            <button type="button" class=" btn btn-package">Button Text</button>
        </div>
        <div class="col-md-3 " style="min-height: 200px; background-color: blue;">
            <button type="button" class=" btn btn-signup">Button Text</button>
        </div>
    </div>
   </div>

CSS:

 .container{
 width:100%;
 position:relative;
 padding-right:0;
 padding-left:0;
 }
.btn{
 position:absolute;
 z-index:900;
 bottom:45%;
 right:25%;
 }
 .btn-default{
 background-color:#ED1C24 !important;
 border:none;
 font-size:20px;
 text-align:center;
 }
 @media (max-width: 600px){
 .btn{
 position:absolute;
 z-index:900;
 bottom:45%;
 right:25%;
 }
 .btn-default{
 background-color:#ED1C24 !important;
 border:none;
 font-size:20px;
 text-align:center;
 }
 }
 @media (max-width: 500px){
 .btn {
 position:absolute;
 z-index:900;
 bottom:45%;
 right:25%;
 }
 .btn-default{
 background-color:#ED1C24 !important;
 border:none;
 font-size:10px;
 text-align:center;
 }
 }
 .slider-wrapper.theme-default{
 max-height:500px;
 overflow:hidden;
 }
 .nivoSlider{
 position:relative;
 }
 .nivoSlider img{
 position:absolute;
 top:0px;
 left:0px;
 display:none;
 }
 .nivoSlider a{
 border:0;
 display:block;
 }
 .center-buttons{
 margin:0 auto 0;
 }
 .btn-security{
 background-color:#FFFFFF;
 border-color:#1B75BB;
 color:#1B75BB;
 }
 .btn-package{
 background-color:#FFFFFF;
 border-color:#1B75BB;
 color:#1B75BB;}
.btn-signup{
 background-color:#FFFFFF;
 border-color:#F90B0B;
 color:#F90B0B;
 }

Upvotes: 1

Views: 2381

Answers (1)

David
David

Reputation: 48

Have you tried given the button its own class name to add styles to instead of using the .btn classes? 

<button type="button" class="my-button btn btn-default btn-lg active">Button</button>

And then call your css on my-button instead of btn.

.my-button{
    position:absolute;
    z-index:900;
    bottom:45%;
    right:25%;
}

Upvotes: 1

Related Questions