Back to Course

BootStrap

0% Complete
0/39 Steps
  1. Introduction to Bootstrap
    What is Bootstrap ?
  2. Why Bootstrap ?
  3. Bootstrap Setup
  4. Customizing Install
  5. Responsive Design
  6. Container class
  7. Grid
    Grid System
  8. Bootstrap Grid Column
  9. Dynamic Layouts
  10. Utility Classes
  11. Navigation Components
    Navs
  12. Navbars
  13. Page Components
    Headers
  14. Panels
  15. ListGroups
  16. Breadcrumbs
  17. Labels
  18. Buttons
  19. Glypgicons
  20. Wells
  21. Forms
    Creating forms
  22. Inline & horizontal forms
  23. Form Validation
  24. Bootstrap Plugins
    Alert Messages
  25. Buttons group
  26. Scroll Spy
  27. Tabs
  28. Collapse
  29. Modal
  30. Customer Plugins
    Bootbox.js
  31. DateTime Picker
  32. Font Awesome
  33. Off-Canvas
  34. Image Gallery
  35. Social Buttons
  36. Sweet Alert
  37. Button
    Buttons
  38. Button Group Button
  39. Button Method

Participants2254

Show more
BootStrap Headers
In Progress
Lesson 13 of 39
In Progress

Headers

Akash

Bootstrap has created an HTML component to be used as a page header.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
    <div class="container">
        <div class="page-header">
            <h1>Chapter 4</h1>
        </div>
    </div>
  </body>
</html>

Output:

KodNest bt44

Page subtitle

To add a subtitle beside the title of the page, we can put it inside the same <h1> wrapped inside a <small></small> tag.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
    <div class="container">
        <div class="page-header">
            <h1>Chapter 4 <small>Bootstrap Page Components </small></h1>
        </div>
    </div>
  </body>
</html>

Output:

KodNest bt45

New Report

Close