Unlock the Power of Open Source! The " Linux New " SWAYAM Plus Course is live now and about 2,500 learners have already registered for it.

If you are a registered learner, the forum page is now active. Visit the page and get all your questions answered.

Jumbotron and Breadcrumb in Bootstrap - English

This is a sample video. To access the full content,
please Login

2362 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