---
title: "Collapsible navbar with logo with the help of bootstrap classes"  
description: "Collapsible navbar with logo with the help of bootstrap classes"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2021-07-28  
canonical: https://www.mindstick.com/forum/156617/collapsible-navbar-with-logo-with-the-help-of-bootstrap-classes  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 2 minutes  

---

# Collapsible navbar with logo with the help of bootstrap classes

How to make a [collapsible navbar with logo](https://answers.mindstick.com/qa/93867/how-to-make-a-collapsible-navbar-with-logo-with-the-help-of-bootstrap-classes) with the help of [bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel) classes?

## Replies

### Reply by Anonymous User

To make a collapsible [navbar](https://www.mindstick.com/forum/1331/expand-the-navbar-group-of-nabarcontrol-on-button-click-using-devexpress-navbarcontrol) 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!


---

Original Source: https://www.mindstick.com/forum/156617/collapsible-navbar-with-logo-with-the-help-of-bootstrap-classes

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
