Bootstrap’s NavBar sizing and transition can be customized with a little CSS knowledge. In this tutorial I will make the NavBar use the full screen height and have the content open left to right.
Here’s a screenshot of what we will build:

Here is a link to the Bootstrap NavBar Docs. I will be using react-bootstrap in this tutorial, but these examples apply to vanilla Bootstrap as well.
Full code for this tutorial is in the Resources section.
The Bootstrap NavBar and its subcomponents are created by adding classes to HTML elements. The NavBar is simply a nav
element with Bootstrap’s navbar
class applied to it.
We might want the NavBar to take full height on a small screen, like an iPhone. We can make the navbar use the full available height by adding CSS to the NavBar component. However, we only want to add the height styling if the NavBar is ‘open’.
I used a React useState
hook to track whether the NavBar was open.
const [isOpen, setIsOpen] = React.useState(false);
This is toggled when the ‘hamburger’ menu button is clicked:
<button onClick={() => setIsOpen(!isOpen)}
We can use the isOpen
state to dynamically apply and remove a CSS class to control height:
<nav className={`${isOpen ? "navbar-full-height" : ""} />
Inside the navbar-full-height
class, add the following CSS:
.navbar-full-height {
height: 100vh;
align-items: flex-start;
}
To create a full height Bootstrap NavBar, add height: 100vh
. This sets height to 100% of the viewport. We will also need align-items: flex-start
. This forces the content to the top of the screen. If you don’t add flex-start, then the default Bootstrap NavBar styling forces the items to the vertical center:

If you keep the dropdown in the navbar you can customize the hover color.
We can create a horizontal collapse animation on the Bootstrap NavBar with some CSS and knowledge of the NavBar subcomponents.
The “Collapse” component is simply a div with the collapse
and navbar-collapse
Bootstrap classes applied. This is where we want to add some classes to create the left-to-right collapse and expand transition.

We will add three classes: show
, open-nav
, and closed-nav
. The show
class is a Bootstrap class that needs to be added to remove the display: none
that exists by default when the collapse subcomponent is ‘closed’ on small screens. Alternatively, if you are using jQuery then the data-bs-toggle="collapse"
will handle this for you.
<div className={`${isOpen ? "open-nav" : "closed-nav"} show collapse navbar-collapse`} />
Inside of open-nav
we need to control the styling of the collapse content when the NavBar is in an open state.
.open-nav {
background-color: wheat;
padding: 4px;
border-radius: 2px;
margin-top: 8px;
}
If you use padding like I did, then it needs to be conditionally applied like my open-nav
class. Otherwise you have a little visible content area even when the NavBar is supposed to be closed. The rest of the styling in this class does not need to be conditional.
Inside of closed-nav
we control the visibility of the NavBar:
.closed-nav {
height: 0px !important;
flex-basis: 0;
flex-grow: 0;
overflow: auto;
}
It is important to set the height to 0px or else the NavBar is too tall even when it is closed (remember, we removed display: none
).
Next, we control the width using flex-basis and flex-grow. We do this because when the Collapse is open, Bootstrap controls its width with flex-basis and flex-grow. For our transition to work, we need to use the same properties.
Finally, the overflow: auto
makes sure the Collapse contents are hidden when we remove their height and flex-basis.
The final styling we need is to add transition to the existing collapse
class. We can enhance Bootstrap classes in our .scss
file:
.collapse {
transition: flex-basis 0.5s, flex-grow 0.5s;
}
This creates the left-to-right opening animation that we desired.
Resources
Here’s how to customize Bootstrap NavBar text color and background color.
//NavBarCustomCollapse.scss
@import "bootstrap/scss/bootstrap";
.navbar-full-height {
height: 100vh;
align-items: flex-start;
}
.collapse {
transition: flex-basis 0.5s, flex-grow 0.5s;
}
.open-nav {
background-color: wheat;
padding: 4px;
border-radius: 2px;
margin-top: 8px;
}
.closed-nav {
height: 0px !important;
flex-basis: 0;
flex-grow: 0;
overflow: auto;
}
//NavBarCustomCollapse.tsx
import React from "react";
import "./NavBarCustomCollapse.scss";
export default function NavBarCustomCollapse() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<nav className={`${isOpen ? "navbar-full-height" : ""} navbar navbar-expand-md navbar-light bg-secondary navbar-fixed-width`} >
<div className="container-fluid">
<div style={{ flexBasis: "100%", display: "flex", flexWrap: "inherit", alignItems: "center", justifyContent: "space-between" }}>
<a className="navbar-brand" href="#">Navbar</a>
<button onClick={() => setIsOpen(!isOpen)} className="navbar-toggler" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
</div>
<div className={`${isOpen ? "open-nav" : "closed-nav"} show collapse navbar-collapse`} id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Link</a>
</li>
</ul>
<form className="d-flex">
<input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
<button className="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav >
);
}