Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap typography

Suggested Video Tutorials
Part 6 - Bootstrap nested rows and columns
Part 7 - Bootstrap image gallery
Part 8 - Bootstrap 3 responsive utility classes



Bootstrap typography makes it easy to create headings, paragraphs, ordered lists, unordered lists, inline elements etc in a way that would be appealing to the users.



Let's start with HTML heading elements - <h1> through <h6>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

The headings from h1 through h6 will be as shown below without bootstrap
bootstrap headings examples

With bootstrap the headings are as shown below.
bootstrap heading elements

Bootstrap also has classes from h1 through h6. These classes are useful when you want to match the font styling of a heading but still want your text to be displayed inline. Let us understand what we mean by this with an example.

<h4>Bootstrap</h4> is a free, open-source and is the most popular
HTML, CSS, and JavaScript framework developed by twitter for creating responsive
web applications. It includes HTML and CSS based design templates for common user
interface components like Buttons, Dropdowns, Typography, Tabs, Forms, Tables,
Navigations, Alerts, Modals, Accordion, Carousel etc. along with optional JavaScript
extensions. Bootstrap framework is based on open standards - HTML, CSS and
JavaScript. This means bootstrap can be used with any server side technology and a
ny platform. You can use it with any web application built with any server side
technology like ASP.NET, JAVA, PHP etc.

In the above html, we are using <h4> element with the word Bootstrap. Since <h4> is a block element it will render the word "Bootstrap" as if there is a line break before and after it as shown below.
html heading h4

If you want the word "Bootstrap" to match the font style of <h4>, but still want the word to be displayed inline with other text then use h4 bootstrap class.

<span class="h4">Bootstrap</span> is a free, open-source and is the most popular
HTML, CSS, and JavaScript framework developed by twitter for creating responsive
web applications. It includes HTML and CSS based design templates for common
user interface components like Buttons, Dropdowns, Typography, Tabs, Forms,
Tables, Navigations, Alerts, Modals, Accordion, Carousel etc. along with
optional JavaScript extensions. Bootstrap framework is based on open standards
- HTML, CSS and JavaScript. This means bootstrap can be used with any server
side technology and any platform. You can use it with any web application built
with any server side technology like ASP.NET, JAVA, PHP etc.

With h4 class, the word "Bootstrap" will be displayed inline with the other text as shown below.
bootstrap h4 class

Another example where we could use .h1 through .h6 classes. Let us say we want to display all the headings from h1 to h6 in a single row as shown below.
bootstrap header classes

If we use the html elements <h1> through <h6> as shown below
<h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>

The headers will not be in the same line, as all the headers are block elements.
html h1 to h6 tags

Instead use .h1 through .h6 classes as shown below
<span class="h1">H1</span><span class="h2">H2</span><span class="h3">H3</span>
<span class="h4">H4</span><span class="h5">H5</span><span class="h6">H6</span>

If you want to create a lighter secondary text along with the main text in any heading, you can use either <small> tag or the .small class.
bootstrap secondary text

Creating secondary text in a heading using the <small> tag

<h1>Main Heading 1 <small>Small Heading 1</small></h1>
<h2>Main Heading 2 <small>Small Heading 2</small></h2>
<h3>Main Heading 3 <small>Small Heading 3</small></h3>
<h4>Main Heading 4 <small>Small Heading 4</small></h4>
<h5>Main Heading 5 <small>Small Heading 5</small></h5>
<h6>Main Heading 6 <small>Small Heading 6</small></h6>

Creating secondary text in a heading using the .small class

<h1>Main Heading 1 <span class="small">Small Heading 1</span></h1>
<h2>Main Heading 2 <span class="small">Small Heading 2</span></h2>
<h3>Main Heading 3 <span class="small">Small Heading 3</span></h3>
<h4>Main Heading 4 <span class="small">Small Heading 4</span></h4>
<h5>Main Heading 5 <span class="small">Small Heading 5</span></h5>
<h6>Main Heading 6 <span class="small">Small Heading 6</span></h6>

In our next video we will discuss working with paragraph elements.

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.