Web Design Course - Lecture 21 - Bootstrap Jumbotron, Thumbnails, Alerts, Progress Bar, List Group, Modal
Download as PPTX, PDF0 likes139 views
The document describes various Bootstrap components including: the Jumbotron for marketing text, Thumbnails for image galleries, Alerts for notifications, Progress Bars to display progress, List Groups for lists, and Modals for popup dialogs. Code examples are provided for each component to demonstrate their basic usage and styling.
Related topics:1 of 9
Downloaded 13 times
More Related Content
What's hot (19)
Ad
Similar to Web Design Course - Lecture 21 - Bootstrap Jumbotron, Thumbnails, Alerts, Progress Bar, List Group, Modal (20)
Ad
More from Al-Mamun Sarkar (20)
Web Design Course - Lecture 21 - Bootstrap Jumbotron, Thumbnails, Alerts, Progress Bar, List Group, Modal
- 1. WEB DESIGN
- 2. BOOTSTRAP Jumbotron1 2 Thumbnails2 Alerts3 2 Progress Bar4 2 List Group5 2 Modal6 2
- 3. Jumbotron <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div>
- 4. Thumbnails <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="..." alt="..."> </a> </div> ... </div>
- 5. Alerts <div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div> <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria- hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div>
- 6. Progress Bar <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div> .progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger .progress-bar-striped
- 7. List Group <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>
- 8. Modal
- 9. THANK YOU