forum

home / developersection / forums / collapsible navbar with logo with the help of bootstrap classes

Ask Question

Collapsible navbar with logo with the help of bootstrap classes

Ethan Karla 293 28-Jul-2021

How to make a collapsible navbar with logo with the help of bootstrap classes?

bootstrap bootstrap 
Updated on 28-Jul-2021
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

03-Aug-2021

To make a collapsible navbar with logo with the help of Bootstrap classes see the below example: 

<!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/4.5.2/css/bootstrap.min.css'>

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>

  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>

</head>

<body>

<nav class='navbar navbar-expand-md bg-primary navbar-dark shadow-lg'>

  <a class='navbar-brand' href='#'>Company Logo</a>

  <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#collapsibleNavbar'>

    <span class='navbar-toggler-icon'></span>

  </button>

  <div class='collapse navbar-collapse' id='collapsibleNavbar'>

    <ul class='navbar-nav'>

      <li class='nav-item'>

        <a class='nav-link' href='#'>Home</a>

      </li>

      <li class='nav-item'>

        <a class='nav-link' href='#'>About</a>

      </li>

      <li class='nav-item'>

        <a class='nav-link' href='#'>Services</a>

      </li>

      <li class='nav-item'>

        <a class='nav-link' href='#'>Contact</a>

      </li>    

    </ul>

  </div>  

</nav>

<br>

<div class='container'>

  <h3>Mindstick Software Pvt. Ltd.</h3>

  <p class='my-4'>We produce and perform exceptional custom software solutions and mobile applications to analyze your business queries. With our latest technology center, flexible methodology, and DevOps combined with pocket-friendly digital solutions, you can innovate and optimize your market performance. As a software development firm, we practice in a spectrum of technologies from head-end and rear-end.</p>

</div>

</body>

</html>

Hope this will help you.

Happy Coding!

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy