CODEWITHSUNDEEP
htmlcssdrupal-7
Marwan AK
Marwan AK

Reputation: 71

exclude div from parent style

I'm trying to override the .container class in bootstrap. I'm using Drupal 7 and I have a css file for my theme which is working perfectly until I want to override the .container

my HTML

 <div class="main-container <?php print $container_class; ?>">
<div class="top-div" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div> 
</div>

that PHP code will insert the class .container

I need to give the div with class .top-diva 100% size without any padding from the .container I've tried the child > selector and descendant selector and the :not(.top-div) methods nothing works. When I use the :not(.top-div) it applies changes on each and every page and element on the website AND the div which contains the .top-div which is really weird. Suggestions?

Upvotes: 0

Views: 1464

Answers (3)

Nirav Joshi
Nirav Joshi

Reputation: 2960

If you are using bootstrap css than you don't need to give any custom css

You try to just add row class in your top-div class

it's a in built in bootstrap.css So no need for any extra custom css.

.row {
  margin-left: -10px;
  margin-right: -10px;
}

Example

<div class="main-container <?php print $container_class; ?>">
<div class="top-div row" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div> 
</div>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
<div class="main-container <?php print $container_class; ?>">
<div class="top-div row" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div> 
</div>

Hope this will helps you.

Upvotes: 1

Xander
Xander

Reputation: 1726

In bootstrap, the padding is applied on the container, not the inner divs. To override this on one element you need to give it negative horizontal margins.

Something like:

.container .top-div {
    margin-left:-10px;
    margin-right:-10px;
}

Where 10px should be replaced by the padding on .main-container.

If this doesn't work right away you may need greater specificity

Bootstrap's built-in .row class uses this method

Upvotes: 1

Varin
Varin

Reputation: 2453

Why don't you try: 

.main-container {
  position:relative;
}

.top-div {
  position:absolute;
  left:0;
  top:0;
}
    
  <div class="main-container <?php print $container_class; ?>">
    <div class="top-div" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
    <div class="row" style="text-align:center;">
    <div class="col-md-4"> text </div>
    <div class="col-md-4"> text </div>
    <div class="col-md-4"> text</div>
    </div> 
    </div>

Upvotes: 1

Related Questions