CODEWITHSUNDEEP
csstwitter-bootstrapoverridingpadding
user1227914
user1227914

Reputation: 3514

how to overwrite padding of a single div in bootstrap?

I'm customizing a bootstrap theme and I'm running into a problem that is probably very easy to solve.

I have a block of data that goes like this:

                    <!-- Data block -->
                    <article class="span4 data-block">
                        <div class="data-container">

                            <section>
                                <img src="photo.jpg" width="350" height="350">
                            </section>
                            <section>
                                <p>Some writing below here</p>
                            </section>
                        </div>
                    </article>
                    <!-- /Data block -->

And my CSS for this part is:

.data-block .data-container {
  padding: 23px 23px 3px 23px;
  background-color: #ffffff;
  border: 1px solid #bec2c8;
  *zoom: 1;
  -webkit-border-radius: 2px 2px 0 0;
  -moz-border-radius: 2px 2px 0 0;
  border-radius: 2px 2px 0 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.15), 0 4px 0 -3px #fff, 0 4px 0 -2px #bec2c8, 0 8px 0 -5px #fff, 0 8px 0 -4px #bec2c8;
  -moz-box-shadow: 0 0 3px rgba(0,0,0,0.15), 0 4px 0 -3px #fff, 0 4px 0 -2px #bec2c8, 0 8px 0 -5px #fff, 0 8px 0 -4px #bec2c8;
  box-shadow: 0 0 3px rgba(0,0,0,0.15), 0 4px 0 -3px #fff, 0 4px 0 -2px #bec2c8, 0 8px 0 -5px #fff, 0 8px 0 -4px #bec2c8;
}

Due to the:

padding: 23px 23px 3px 23px;

i have a space around the image. I want to leave the padding the same for all other data-block divs on the website, but only have no padding (so that the image shows fully without padding inside the div) on this one data-block.

I tried:

<div class="data-container nopadding">

and then added an additional class in the CSS with 0px padding but that didn't work for an override. I'm sure that's where I'm doing something wrong.

Could someone guide me in the right direction? Thank you very much :)

Upvotes: 4

Views: 7304

Answers (1)

Jordan Denison
Jordan Denison

Reputation: 2737

You could either try .data-container.nopadding as the CSS selector instead of just .nopadding, and you can also specify !important after padding: 0 to force this if the above doesn't work.

Upvotes: 1

Related Questions