Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

Collapsible navbar with logo with the help of bootstrap classes

Ethan Karla 391 28 Jul 2021

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

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.

1 Answers

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