Search code examples
htmlcsstwitter-bootstrapfooter

Bootstrap - Navbar and footer with same structure

I'm new to Bootstrap and I want to have my navbar and footer with the same structure, it means colors and font family mainly, I've took code from Bootstrap themes for each of and from different sources, I've done the navbar part and I now want the footer to be with same structure but I don't understand how to do it.

Navbar part:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
  <div class="container" > 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-left" href="#"><img src="images/_ressources/logo.svg" height="50px"></a> </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li> <a href="#" style="font-family: 'Roboto', sans-serif;">ACCUEIL</a> </li>
        <li> <a href="#" style="font-family: 'Roboto', sans-serif;">BOUTIQUE</a> </li>
        <li> <a href="#" style="font-family: 'Roboto', sans-serif;">CONTACT</a> </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="#" style="font-family: 'Roboto', sans-serif;">MON COMPTE</a> </li>
        <li>
          <div class="input-group-btn">
            <button type="button" class="btn btn-default btn-lg" style="background-color:orange"> <span class="glyphicon glyphicon-lock" ></span> </button>
          </div>
        </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Recherche un produit">
          <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
          </div>
        </div>
      </form>
      <!-- /.navbar-collapse --> 
    </div>
  </div>
  <!-- /.container --> 
</nav>

Footer part: 

<footer id="footer">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-3 column">
        <h4>Information</h4>
        <ul class="nav">
          <li><a href="#">Products</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Benefits</a></li>
          <li><a href="#">Developers</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Here's what I want to have : enter image description here

Thanks for the help !

Solution

  • You could use your own stylesheet, which overrides the bootstrap one. Just put this in the head section

    <head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>

    To modify or apply additional styling to your web page, simply add the proper code to your custom.css file. There is no need to edit any of the original Bootstrap styles directly.

    For example, if you decided that you did not like the rounded corners on the buttons, you could apply the following style in your custom.css file.

    .btn {
border-radius: 0px;
}

    Now if you add a button to your web page with the default Bootstrap styles (.btn class), the corners aren’t rounded. This is due to the fact that your custom stylesheet overrides the default Bootstrap stylesheet.

    source: https://bootstrapbay.com/blog/customize-bootstrap/