locked
bootstrap header RRS feed

  • Question

  • User-590375999 posted

    hi,

    how to design the following header in bootstrap

    -------------------------------------------------------------------------------------------------------------

    Username                                                                                                 Date    |         Logo here       |

    Link1  Link2   Link3                                                                                               |                                |

    -------------------------------------------------------------------------------------------------------------

    Tuesday, March 13, 2018 3:22 AM

All replies

  • User516094431 posted

    As per your requirement, I write small sample of code. Check it and you can use accordingly.

    <!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <style>
        /* Remove the navbar's default margin-bottom and rounded borders */ 
        .navbar {
          margin-bottom: 0;
          border-radius: 0;
        }
        
        /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
        .row.content {height: 50px}
        
        /* Set gray background color and 100% height */
        .sidenav {
          padding-top: 20px;
          background-color: #f1f1f1;
          height: 100%;
        }
        
        /* Set black background color, white text and some padding */
        footer {
          background-color: #555;
          color: white;
          padding: 15px;
        }
        
        /* On small screens, set height to 'auto' for sidenav and grid */
        @media screen and (max-width: 767px) {
          .sidenav {
            height: auto;
            padding: 15px;
          }
          .row.content {height:auto;} 
        }
      </style>
    </head>
    <body>
    <footer class="container-fluid text-center">
      <div class="row content">
      	<div class="col-sm-8 text-left">
        UserName: text
        </div>
        <div class="col-sm-2 text-center">
        2018/03/23
        </div>
        <div class="col-sm-2 text-right">
        Logo Here
        </div>
      </div>
    </footer>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <a class="navbar-brand" href="#">Logo</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          </ul>
        </div>
      </div>
    </nav>
      
    <div class="container-fluid text-center">    
      <div class="row content">
        <div class="col-sm-2 sidenav">
          <p><a href="#">Link</a></p>
          <p><a href="#">Link</a></p>
          <p><a href="#">Link</a></p>
        </div>
        <div class="col-sm-10 text-left"> 
          <h1>Welcome</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <hr>
          <h3>Test</h3>
          <p>Lorem ipsum...</p>
        </div>
      </div>
    </div>
    
    <footer class="container-fluid text-center">
      <p>Footer Text</p>
    </footer>
    
    </body>
    </html>

    Tuesday, March 13, 2018 6:07 AM
  • User-590375999 posted

    i need show navbar like below, i am using angular as front end

    https://imgur.com/4T70pkShi,

    Tuesday, March 13, 2018 12:58 PM
  • User-1838255255 posted

    Hi sivapooja,

    According to your description, you have to wrap the button and heading in a div and put class="clearfix-xs" in it. like this:

    Sample Code: 

    <div class="clearfix-xs">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        </button>
    </div>
    and css for this clss is: @media(max-width:768px){.clearfix-xs:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } } Sample: Html <nav class="navbar navbar-dark bg-danger"> <div class="clearfix-xs"><a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button></div> <div class="collapse navbar-toggleable-md" id="navbarResponsive"> <ul class="nav navbar-nav float-md-right"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav> CSS @media(max-width:768px){.clearfix-xs:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } }

    Best Regards,

    Eric Du 

    Wednesday, March 14, 2018 7:09 AM