Bootstrap Headings

Headlines

Listing 7.1 - Bootstrap Headlines, and inline headings

<h1> Bootstrap heading

This is a paragraph with an inline <h1> heading

<h2> Bootstrap heading

This is a paragraph with an inline <h2> heading

<h3> Bootstrap heading

This is a paragraph with an inline <h3> heading

<h4> Bootstrap heading

This is a paragraph with an inline <h4> heading

<h5> Bootstrap heading

This is a paragraph with an inline <h5> heading

<h6> Bootstrap heading

This is a paragraph with an inline <h6> heading

Headlines with Secondary headlines

Listing 7.2 - Secondary Text in Headlines

<h1> Headline With Secondary Text

<h2> Headline With Secondary Text

<h3> Headline With Secondary Text

<h4> Headline With Secondary Text

<h5> Headline With Secondary Text
<h6> Headline With Secondary Text

Inline headlines with Secondary headlines

Listing 7.3 - Secondary Headlines on Inline Headlines

This is a paragraph with a inline <h1> heading and secondary headline Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a paragraph with a inline <h2> heading and secondary headline Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a paragraph with a inline <h3> heading and secondary headline Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a paragraph with a inline <h4> heading and secondary headline Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a paragraph with a inline <h5> heading and secondary headline Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a paragraph with a inline <h6> heading and secondary headline Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Headlines with image replacement

With the .text-hide class, you can create a graphic headline and replace the text while keeping the page accessible.

Listing 7.4 - Using image replacement in a header

Headline

And here is the page content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed erat facilisis, sollicitudin diam sed, condimentum est. Sed lobortis pellentesque odio, eu tristique est commodo non. Duis lacinia rhoncus elit, ut molestie mauris pulvinar ac. Suspendisse ac quam sem. Vestibulum vestibulum porttitor accumsan. Curabitur nunc nibh, fringilla vel sollicitudin sit amet, tristique vel velit. Etiam mattis ante id tempor convallis.

Morbi semper enim vitae metus viverra pretium. Aenean felis orci, aliquet eu felis elementum, finibus iaculis arcu. Nullam hendrerit laoreet aliquam. Fusce molestie consequat commodo. Integer quis malesuada mi. Cras in libero erat. Sed elementum metus nibh, sit amet tempor dolor dictum quis. Donec nec lectus in justo porta lacinia sollicitudin ac orci. Donec interdum, mauris ac tincidunt imperdiet, ex turpis lobortis nisi, ac dictum sem nisi non augue. Maecenas scelerisque iaculis tincidunt. Praesent eget augue interdum, imperdiet ex a, pellentesque libero. Sed ante tortor, auctor id facilisis sit amet, tristique id tellus.

Headers

Listing 7.5 - Adding a page header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.