CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Bera
Bera

Reputation: 85

How to prevent overriding of div in bootstrap

I have two fixed rows.In first one there is a image and in second one there is a menu bar. when i am trying to add next row (which will contain another image file) below that two fixed row, the image file overrides to the first row (fixed row). Someone please help me! Thank You.

<!DOCTYPE html>

<head>

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

</head>

<body>
    <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-top" style="width:100%">
              <div class="row">

                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <img class="img-responsive" src="images/logo.png"></div>
                </div>
                <div class="row" >
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <ul class="nav nav-tabs navbar-inverse">

                                        <li style="margin-right:15px"><a href="home.html">Home</a></li>
                                        <li style="margin-right:15px"><a href="aims.html">Our AIMS</a></li>
                                        <li style="margin-right:15px"><a href="mission.html">Mission</a></li>

                        </ul>
                    </div>
                </div>
        </nav>
    </div>

            <div class="container">
                <div class="row">
                     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <img class="img-responsive" src="images/sideImg.jpg" alt="save humanity">
                     </div>
                </div>

            </div>

</body>
</html>

Upvotes: 0

Views: 790

Answers (2)

m4n0
m4n0

Reputation: 32275

Since the container of the first two rows is fixed, it is out of the normal flow of the document. You will need to add padding-top to the third div/row which is > the height of the first two rows/container.

HTML

<div class="third-row"> <!-- Add custom div wrapping the container -->
  <div class="container">

CSS

.third-row {
  padding-top: 150px;
}

Output:

.third-row {
  padding-top: 150px;
}
<!DOCTYPE html>

<head>

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

</head>

<body>
  <div class="container-fluid">
    <nav class="navbar navbar-default navbar-fixed-top" style="width:100%">
      <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <img class="img-responsive" src="http://placehold.it/100x100">
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <ul class="nav nav-tabs navbar-inverse">

            <li style="margin-right:15px"><a href="home.html">Home</a>
            </li>
            <li style="margin-right:15px"><a href="aims.html">Our AIMS</a>
            </li>
            <li style="margin-right:15px"><a href="mission.html">Mission</a>
            </li>

          </ul>
        </div>
      </div>
    </nav>
  </div>
  <div class="third-row">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <img class="img-responsive" src="http://placehold.it/1200x300" alt="save humanity">
        </div>
      </div>

    </div>
  </div>
</body>

</html>

Upvotes: 1

Arshid KV
Arshid KV

Reputation: 10037

Try as following example .

HTML

<div class="row custom">
</div>

CSS

.custom{
  //your codes 
  }

Upvotes: 0

Related Questions