CODEWITHSUNDEEP
htmltwitter-bootstrapcsscss-selectors
Xander
Xander

Reputation: 1011

How to override Bootstrap CSS without using inline styling?

I'm trying to override Bootstrap's CSS of the following p element: https://gyazo.com/6bf5dde284fa53fd4c9cd098ddb1f109

(I'd like to add a top-margin: 10px; and remove Bootstrap's bottom margin)

The only way I could get it to override thus far is to use inline styling which i'd prefer to avoid. Also I'd like to avoid !important unless really necessary.

My css files are ordered as follows:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/login.css">

Things i've tried:

<p id="pMargin">
#pMargin {
   margin: 10px 0px 0px 0px !important;
}

<p class="pMargin">
.pMargin {
   margin: 10px 0px 0px 0px !important;
}

#sdntLogForm p {
   margin: 10px 0px 0px 0px !important;
}

body p {
   margin: 10px 0px 0px 0px !important;
}

My HTML:

<!-- STUDENT TAB -->
<div id="student" class="tab-pane fade in active">
  <form id="sdntLogForm" class="form-container" action="#" method="post">
    <div class="error">
      <?php
        if(isset($error)){
          echo ($error);
        }
      ?>
    </div>
    <div class="form-group">
      <h1 class="formHeader">Student Login</h1>
      <label for="sdntLogEmail">Email address</label>
      <input type="email" class="form-control" id="sdntLogEmail" name="sdntLogEmail" placeholder="Email" tabindex="1" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
    </div>
    <div class="form-group">
      <label for="sdntLogPass">Password</label>
      <input type="password" class="form-control" id="sdntLogPass" name="sdntLogPass" placeholder="Password" tabindex="2">
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" tabindex="3" id="sdntLogRemember" name="sdntLogRemember">Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-success btn-block" id="sdntLogSubmit" name="sdntLogSubmit" tabindex="4">Login</button>
    <p>If you don't have a student account, you can register one <a href="sdntRegister.php">here</a>.</p>
  </form>
</div>

Upvotes: 0

Views: 733

Answers (1)

Johannes
Johannes

Reputation: 67758

That link opens a blank page here, so it's a bit hard to tell, but since you only have one p tag in that HTML code, I try it:

Use a CSS selector with as much specifity as possible, i.e.:

div#student.tab-pane.fade.in.active form#sdntLogForm.form-container p { ... }

Upvotes: 2

Related Questions