Twitter Bootstrap Question posted in

Add a margin left to everything under an element – Twitter bootstrap

I’m trying to format all text under the h3 classes of red-column so that there is some margin on the left side.

I currently have some css that says everything after red-column should have a margin left of 15px.

However, when the text wraps, it no longer has a margin left.

How do I fix this so that it all has a margin left of 15px even when the line breaks?

Here is a link to my codepen
http://codepen.io/aahmed2/pen/xERqKB?editors=1000 

.red-column {
  background: #d00000;
  color: #fff;
  padding: 10px;
}
.red-column ~ a,
.red-column ~ h4 {
  margin-left: 15px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h2>Pet Diseases</h2>

  <div class="col-md-4">
    <h3 class="red-column">Dogs</h3>
    <h4>General Resources</h4>
    <a href="http://www.pethealthnetwork.com/which-canine-vector-borne-diseases-are-my-area" target="_blank">Which Canine Vector-Borne Diseases Are In My Area? (PHN)</a>
    <br>
    <a href="http://www.pethealthnetwork.com/dog-health/dog-checkups-preventive-care/what-does-your-dogs-urine-color-mean" target="_blank">What Does Your Dog's Urine Color Mean? (PHN)</a>
    <br>
    <a href="http://www.pethealthnetwork.com/dog-health/dog-diseases-conditions-a-z/6-tick-borne-diseases-you-should-know-about" target="_blank">6 Tick-Borne Diseases You Should Know About (PHN)</a>
    <h4>Diseases</h4>
    <a href="/resources/anaplasmosis.asp">*Anaplasmosis</a>
    <br>
    <a href="/resources/brucellosis.asp">*Brucellosis</a>
    <br>
    <a href="/resources/cryptosporidium.asp">*Cryptosporidium</a>
    <br>
    <a href="/resources/e-coli.asp">*E. coli</a>
    <br>
    <a href="/resources/tick-diseases.asp">*Ehrilichiosis</a>
    <br>
  </div>
  <div class="col-md-4">
    <h3 class="red-column">Cats</h3>
    <h4>General Resources</h4>
    <a href="http://www.pethealthnetwork.com/what-feline-infectious-diseases-are-my-area" target="_blank">What Feline Infectious Diseases Are in My Area? (PHN)</a>
    <br>
    <a href="http://www.pethealthnetwork.com/dog-health/dog-diseases-conditions-a-z/6-tick-borne-diseases-you-should-know-about" target="_blank">6 Tick-Borne Diseases You Should Know About (PHN)</a>
    <br>
    <a href="http://www.pethealthnetwork.com/cat-health/cat-diseases-conditions-a-z/7-causes-cat-sneezing" target="_blank">7 Causes of Cat Sneezing (PHN)</a>
    <br>
    <h4>Diseases</h4>
    <a href="/resources/anaplasmosis.asp">*Anaplasmosis</a>
    <br>
    <a href="/resources/cryptosporidium.asp">*Cryptosporidium</a>
    <br>
    <a href="/resources/q-fever.asp">*Q Fever</a>
    <br>
  </div>

  <div class="col-md-4">
    <h3 class="red-column">Amphibians &amp; Reptiles</h3>

    <h3 class="red-column">Rodents</h3>
    <a href="/resources/q-fever.asp">*Q Fever</a>
    <br>
    <a href="/resources/leptospirosis.asp">*Leptospirosis</a>
    <br>

    <h3 class="red-column">Birds</h3>
    <a href="/resources/q-fever.asp">*Q Fever</a>
    <br>

  </div>

</div>
Tags:

2

Answers


  1. 0

    This fixed it, thanks to @klikas:

    .red-column ~ a,
.red-column ~ h4 {
   display: inline-block;
   margin-left: 15px;
}
    Login or Signup to reply.
  2. 0

    Put those sections into DIVs and give them a class that has that margin:

    http://codepen.io/anon/pen/gwLmWg?editors=1100

    class="x" in this example

    .x {
   margin-left: 15px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search