Reputation: 99
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:
.myfooter
class to be only loaded for single page and
bootstrap class .panel-footer
for other pages.So how should write
CSS class for this task?.myfooter
.Upvotes: 0
Views: 329
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