Twitter Bootstrap Question posted in

css class being applied to entire page instead of that particular div – Twitter bootstrap

I have the following HTML:

<!DOCTYPE html>
<head>
  <title></title>
  {% load staticfiles %}
  <link rel="stylesheet" type="text/css" href="{% static 'portfolio/mystyle.css' %}" />
  <link rel="stylesheet" type="text/css" href="{% static 'portfolio/animate.css' %}" />
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/data.js"></script>
  <script src="https://code.highcharts.com/modules/drilldown.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bodyback">
  <div class="col-md-12" align="center" style="height:100%">
    <a href="{% url 'home' %}">
      <img style="margin-top: 20px;" 
           class="h-logo animated fadeInDown" src="{% static 'portfolio/img/hero.png' %}" 
           width="180" height="180" alt="">
    </a>
    <br>
    <section id="hi">
      <div class="container animated fadeInUp" align="center">
        <h2 style="color:#45b29a;" align="center">Hi.</h2>
        <p class="p_class" align="center">I'm Gentle Joseph, <br>a 24 year old web designer/developer from Singapore.<br> I have a passion for web design and love to create for web and mobile devices.</p>
      </div>
    </section>
    <button class="btn btn-xs"></button>
    <button class="btn btn-xs"></button>
    <button class="btn btn-xs"></button>
    <br><br><br><br><br><br><br><br>
    <section>
      <div>
        <h1 style="color:#45b29a;" align="center">What I can do.</h1>
        <br><br>
        <table>
          <tr>
            <td align="right" width="50%">
              <img
                   class="h-logo animated fadeIn" 
                   src="{% static 'portfolio/img/design.gif' %}" 
                   width="200" height="200" alt=""></a>
          </td>
        <td align="center" width="50%"><h3>Design what you want.</h3><br>
          <p class="p_class"> I like to keep it simple. My goals are to focus on<br> typography, content and conveying the message that you want to send.</p>
        </td>
        </tr>
      <tr>
        <td align="center" width="50%"><h3>Develop what you need.</h3><br>
          <p class="p_class"> I'm a developer, so I know how to create your<br> website to run across devices using the latest<br> technologies available.</p>
        </td>
        <td align="left" width="50%">
          <img
               class="h-logo animated fadeIn" 
               src="{% static 'portfolio/img/develop.gif' %}" 
               width="100" height="100" alt=""></a>
      </td>
    </tr>
  </table>
</div>
</section>
<br><br><br><br><br>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
</div><br>
</body>
<div align="center" class="more_about">
  <a href="{% url 'academics' %}">&nbsp;&nbsp;Read more about gentle
    <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
</div>
<footer>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <div class="col-md-12" align="right" style="margin-top: 6px;">
    <ul class="social-network social-circle">
      <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
      <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
    </ul>
  </div>
</footer>
</html>

And my CSS:

.more_about {
    background-color: red;

}

Please ignore all the classes i mentioned in my HTML, because my CSS doesn’t have those classes. But i dont know why when i load the page instead of the div where i mentioned my class, the entire page getting background red. Any idea why guys? Thanks in advance.

Tags:

2

Answers


  1. 0

    I think this what you expected,just you need to add float:left 

    .more_about{
    background-color: red;
    float:left;
}
    Login or Signup to reply.
  2. 0

    Please correct the following mistakes in your code and it will fix the issue

    1) You have closed your body tag before that div having class more_about
    Body tag should always be closed in the end below the footer.

    2) You need to add div with class clearfix as shown below just before your div with class .more_about to clear all the float applied to the upper divs.

    <div class="clearfix"></div> <!-- this will clear all the  floats -->
<div align="center" class="more_about">
    <a href="{% url 'academics' %}">&nbsp;&nbsp;Read more about gentle
    <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search