CODEWITHSUNDEEP
htmlcss
traveller
traveller

Reputation: 83

CSS: navbar and place div under it

I'm trying to create a navbar with bootstrap, and place a div under it I want that the div under the navbar occupy all the rest of the page. The problem is that I don't know how to do this, I'm a newbie Bootstrap and CSS.

I've created navbar like this:

 <nav class="navbar navbar-inverse">
 <div class="container-fluid">
 <div class="navbar-header">
   <a class="navbar-brand" href="#">WebSiteName</a>
 </div>
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
 </ul>
</div>
</nav>

and put under it a div:

 <div id='restofthepage'></div>

and this is the css:

html, body {
  height: 100%; 
  width: 100%;
}
.navbar {
  top: 10px; 
  wisth: 100%;
}
.restofthepage{
  padding-top: 15px;
  height: 100%; 
  width: 100%; 
  background-color: red;
}

but when I display it, I can onşy see the navbar, but I want to see both, and that the div under the navbar occupies all the screen. How can I do that?

Upvotes: 1

Views: 695

Answers (2)

LXhelili
LXhelili

Reputation: 980

Change class to id on your css.

html, body {
  height: 100%; 
  width: 100%;
}
.navbar {
  top: 10px; 
  wisth: 100%;
}
#restofthepage{
  padding-top: 15px;
  height: 100%; 
  width: 100%; 
  background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-inverse">
 <div class="container-fluid">
 <div class="navbar-header">
   <a class="navbar-brand" href="#">WebSiteName</a>
 </div>
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
 </ul>
</div>
</nav>
<div id='restofthepage'></div>

Upvotes: 1

Srikanta Gouda
Srikanta Gouda

Reputation: 521

You can simply do this by creating a row class like the below.

    <div class="row" id="">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <ul class="nav navbar-nav">
                        <li style="background-color: #e97e36 "><a href="#" id="lhome">Home</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right" id="logoutb" hidden>
                        <li><a href="logout.jsp"><span class="glyphicon glyphicon-log-out"></span> Log Out</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
 <div class="row" id='restofthepage'>
Rest of page content goes here.
</div>

Upvotes: 0

Related Questions