Bootstrap
- 2. Introduction ➔ Bootstrap is a free and open-source CSS framework. ➔ It contains CSS and JavaScript based design templates for typography, forms, buttons, navigation and other interface components. ➔ It offers many more resources (articles and tutorials, third-party plugins and extensions, theme builders, and so on) than the other front-end frameworks combined. ➔ In short, Bootstrap is everywhere.
- 3. Applying Bootstrap To use Bootstrap Classes we need to import them. Bootstrap can be applied in two ways in a html page: ● With Bootstrap CDN links. ● With Download Bootstrap files.
- 4. Applying Bootstrap Bootstrap CDN link <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> Bootstrap CDN links should be placed in the head tag of the html page.
- 6. Bootstrap Text Classes Class Description .h1 - .h6 headings .text-muted Faded text .display-1 - .display-4 Headings 2 .lead Separate paragraph .blockquote For containing blockquotes .blockquote-footer For the source of blockquote
- 7. Table table table-striped table-bordered table-hover table-condensed
- 8. Forms Input Tag Class : form-group <div class="form-group"> <div> Input Tag Class : form-control <input type="password" class="form- control" id="exampleInputPassword1" placeholder="Password">
- 9. Container
- 12. Bootstrap Grids Col 1 Col 2 Col 3 Col 4 Col 5 Col 6 Col 7 Col 8 Col 9 Col 10 Col 11 Col 12 Col 1 Col 2 Col 3 Col 4 Col 1 Col 2
- 13. Bootstrap Grid Classes Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px Max container width None (auto) 540px 720px 960px 1140px Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- # of columns 12 Gutter width 30px (15px on each side of a column) Nestable Yes Column ordering Yes
- 14. Bootstrap Grids
- 15. Images Non-responsive Responsive Image Classes ● .img-fluid ● .img-thumbnail ● .rounded ● .rounded-circle img-responsive
- 16. Alerts Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success).
- 17. Cards A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.