stackOverFlowGeek
stackOverFlowGeek

Reputation: 99

Overriding the bootstrap class properties

myClass:

 .myfooter{
    background-color: #ffffff;
    padding: 10px 15px;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    border-top: none;
     border-bottom-right-radius:none; <!--In chrome show inavalid property why?
    border-bottom-left-radius: none;<!--In chrome show inavalid property why?

     }

bootstrap 3:

 .panel-footer {
 padding: 10px 15px;
 background-color: #f5f5f5;
 border-top: 1px solid #ddd;
 border-bottom-right-radius: 3px;
 border-bottom-left-radius: 3px;} <!--copy and paste it here from chrome 
  browser-->

main page:

  <div class="container doc-container">
     <div class="row">
        <div class="col-md-12">
         <div class="panel panel-default">
           <div class="panel-footer myfooter clearfix">
                               <strong>Terms and Conditions:</strong><br>
                                1- Line 1
                                2- Line 2

                            </div>
          </div>
    </div>
   </div>
   </div>

I am making an custom class for bootstrap 3 panel. I need to overide all of the properties of myfooter with bootstrap panel-footer. I properly declared my custom class after bootstrap class in <header>. Now My question is:

Upvotes: 0

Views: 329

Answers (1)

mrpbennett
mrpbennett

Reputation: 1956

Not sure if I understand you correctly, but if you want to use .myfooter on one page only, I would personally call that class on that page like <div class="myfooter"></div> and on all other pages use <div class="panel-footer"></div>

As for picking bootstrap class elements, you could just use two classes .panel-footer which has all the standard bootstrap elements, then create a 2nd class to add / change elements to your footer. So could work something like <div class="panel-footer custom-footer"></div> and the customer footer would hold your bespoke elements.

Upvotes: 1

Related Questions