CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Malik Brahimi
Malik Brahimi

Reputation: 16711

Bootstrap 4 Side Navigation

Taking a look at the Bootstrap 4 documentation, there is clearly a left aligned navigation bar on the side which takes the full height of its parent as the main content scrolls in the center. I've been inspecting elements trying to reverse engineer it, but try as I might, I can't seem to get my column to be full height. Any ideas of how to implement this using the Bootstrap 4 utility classes?

Upvotes: 0

Views: 1131

Answers (1)

Rob Quincey
Rob Quincey

Reputation: 2896

Look like they are using some custom CSS and not built in Bootstrap classes.

If you inspect the element you'll see there is a class of the main container called bd-sidebar. Looking at the CSS rules you'll find something that looks like this.

@media (min-width: 768px)
.bd-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 4rem;
    z-index: 1000;
    height: calc(100vh - 4rem);
}

Taking you through that line by line. The top line is the media query, so this whole rule will only apply at screen width of 768px or above.

position:sticky - These guys can explain it better than me - https://css-tricks.com/position-sticky-2/ - Above that is a vendor-prefixed version.

top:4rem - Pushes the top of it down by 4 'relative ems'. This makes it clear the top nav bar.

z-index:1000 - makes sure it sits above and below certain content.

And here comes the clever bit!

height: calc(100vh - 4 rem)

This calculates the height of this element by removing 4 relative ems (remember the nav bar height we wanted to clear earlier) from 100vh. A vh is a viewport height and is a percentage of the full viewport height. For example, 10vh will resolve to 10% of the current viewport height (source: https://css-tricks.com/fun-viewport-units/)

Upvotes: 1

Related Questions