Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
- Building a Navbar 9:17
- Using Jumbotron to Showcase Key Content 2:48
- Buttons and Button Groups 5:22
- Inline Navs and Dropdown Buttons 5:09
- Displaying Content with Cards 7:32
- Building the Schedule with a List Group 6:26
- Displaying a Modal Window 5:02
- Using ScrollSpy to Highlight Nav Links 4:22
- Bootstrap Components Review 6 questions

- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Bootstrap simplifies many complex or time-consuming tasks like building navigations, from controls, drop-down menus and more. In this video, we'll continue building the Full Stack Conf site using Bootstrap's UI components, starting with the navbar.
Code snippet
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class="container">
<a class="navbar-brand order-1 mr-0" href="https://www.teamtreehouse.com" target="_blank">Presented by Treehouse</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#about">About</a>
<a class="nav-item nav-link" href="#speakers">Speakers</a>
<a class="nav-item nav-link" href="#schedule">Schedule</a>
</div>
</div>
</div>
</nav><!-- /navbar -->
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up-
Cool Beans
6,937 Points1 Answer
-
Kieran Mackey
2,271 Points2 Answers
-
Kirt Perez
7,374 Points2 Answers
-
Neha S
7,290 Points2 Answers
-
Zoltán Erkel
6,340 Points2 Answers
-
PLUS
ALMEKDAD ALMUHAMMAD
Courses Plus Student 10,947 Points1 Answer
-
Clinton Hays
Front End Web Development Techdegree Graduate 18,156 Points1 Answer
-
Jan Durcak
12,662 Pointshello how would you put nav bar straight again if on " <a>home</a> change size to h4
Posted by Jan DurcakJan Durcak
12,662 Points1 Answer
-
Piotr Manczak
Front End Web Development Techdegree Graduate 29,368 Points3 Answers
-
Obe Juarez
6,357 Points2 Answers
-
Sathvik Reddy
6,223 Points2 Answers
-
Peter Retvari
2,566 Points5 Answers
-
Yu-Yang Hsiao
6,295 Points1 Answer
-
Benjamin Lowry
7,941 Points1 Answer
-
Belal Ismail
Front End Web Development Techdegree Student 262 Points2 Answers
View all discussions for this video
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up