0

How to increase height of menu bar in this code, how decrease column size and height how put a rich css for this design can anyone help me without any custom css. in notice column data should display in that yellow color place only 

<!DOCTYPE html>
            <html lang="en">
            <head>
              <title>Bootstrap Example</title>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
              <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
              <link rel="stylesheet" type="text/css" href="newcss.css">
            </head>
            <body>
            <nav class="navbar navbar-default navbar-fixed-top">
             <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
                  <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </a>
                </div>
                <div class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">More</a></li>
                    <li><a href="#">Options</a></li>
                  </ul>
                </div>
            </nav>

            <!-- Begin page content -->
            <div class="container-fluid">
              <div class="row">
              <div class="col-md-2 sidebar" id="side1">Links</div>
                <div class="col-md-8">
                  <div class="page-header">
                <h1>Student Management System</h1>
              </div>
              <p class="lead">Home Page.</p>
                </div>
                <div class="col-md-2 sidebar" id="side2">notice</div>
              </div>  
            </div>

            <div id="footer">
              <div class="container">
                <p class="text-muted">Place sticky footer content here.</p>
              </div>
            </div>
            </body>
            </html>
Giridhar Gada
  • 19
  • 4

1 Answers1

0

I didn't get your actual requirement, but menubar height can be increased by adding following CSS. Note: This is a workaround, may not be responsive

.navbar{
     height : 100px !important; /*keep your own height here*/
}
Jyothi Babu Araja
  • 10,076
  • 3
  • 31
  • 38
  • Student Management System
     – Giridhar Gada Jun 16 '16 at 05:58
  • i changed nav bar as one top row. for this .navbar{ height : 100px !important; /*keep your own height here*/ } – Giridhar Gada Jun 16 '16 at 05:59
  • its not working.. that css will move the contents downwards – Giridhar Gada Jun 16 '16 at 06:00
  • https://jsfiddle.net/mkyong/jbchky22/ how to fill the gap which is above the top section – Giridhar Gada Jun 16 '16 at 06:52
  • [Bootstrap](http://getbootstrap.com) is an html, css, javascript framework that you can use as basis for creating web sites or web applications. More information can be said [here](http://stackoverflow.com/a/14546740/1345854). With that said after you have create your HTML, any changes, adjustment, or overrides, are done through a seperate CSS file (e.g. custom.css). – Ian Jun 16 '16 at 07:58
  • anyone check thsi fiddle https://jsfiddle.net/mkyong/jbchky22/ tell me how to fill the gap which is above the top section – Giridhar Gada Jun 16 '16 at 08:30
  • The body tag has a 50px padding on the top. Check [https://jsfiddle.net/edden87/jbchky22/1/](https://jsfiddle.net/edden87/jbchky22/1/) with my adjustment. Thoughts? – Ian Jun 16 '16 at 08:43