Jumbotron and Breadcrumb in Bootstrap - English

Play
Current Time 0:00
/
Duration Time 0:00
Remaining Time -0:00
Loaded: 0%
Progress: 0%
0:00
Fullscreen
00:00
Mute

1317 visits

  1. Instruction Sheet
  2. Installation Sheet
  3. Report Missing Component
  4. Post your Question on the Forum
Outline:
Jumbotron and Breadcrumb in Bootstrap

Display the contents such as heading, paragraph, etc. using Jumbotron
Create a breadcrumb as Home/Login
About Jumbotron
Add a .jumbotron class for proper spacing and styling
About Breadcrumb
Create a breadcrumb by using the .breadcrumb class on the ordered list
About .breadcrumb-item class 
Example to show the breadcrumb
Navigate between the two pages using breadcrumb
Display the jumbotron for laptop and desktop
Display the jumbotron for mobile and tablets
Width:1002 Height:702
Duration:00:07:26 Size:3.8 MB

Show video info

Pre-requisite

Alert and Badge in Bootstrap

  Assignment

Code files

  • Jumbotron-Breadcrumb-CodeFiles/
  • Jumbotron-Breadcrumb-CodeFiles/Form.txt
  • Jumbotron-Breadcrumb-CodeFiles/Form.html
  • Jumbotron-Breadcrumb-CodeFiles/Login.html
  • Jumbotron-Breadcrumb-CodeFiles/Mypage.html
  • Jumbotron-Breadcrumb-CodeFiles/Logo.png
  • Jumbotron-Breadcrumb-CodeFiles/Login.txt
  • Jumbotron-Breadcrumb-CodeFiles/Mypage.txt

Script

Slides

  • Slides-Jumbotron-Breadcrumb-in-Bootstrap/
  • Slides-Jumbotron-Breadcrumb-in-Bootstrap/Jumbotron-_-Breadcrumbs-in-Bootstrap.tex
  • Slides-Jumbotron-Breadcrumb-in-Bootstrap/spoken.png
  • Slides-Jumbotron-Breadcrumb-in-Bootstrap/Jumbotron-_-Breadcrumbs-in-Bootstrap.pdf