Full Stack Developer Masters Program (57 Blogs) Become a Certified Professional

How to Create a Bootstrap Header?

Last updated on Jun 19,2023 1.7K Views

1 / 12 Blog from Boostrap

A title or the bootstrap header is important to let your search engine know what your article is about and what information your articles contain. The copies or content in the bootstrap header communicates with a search engine and when a user searches with a particular set of keywords, your articles or blog shows up in the search result. In this Bootstrap Header article, we will cover the following topics:


Introduction to Header

A document can contain multiple bootstrap header tags. These bootstrap tags are important for Search engine optimization. These bootstrap header tags start from <h1>, <h2>, and go all the way till <h6>. The <h1> and the <h2> tags are the most important tags for search engine optimization. The <h1> tag shows the text in the biggest font while the <h6> shows in the smallest font.

The bootstrap header is styled in the following ways:


H1 Header Tag

The <h1> bootstrap header tag is used to indicate the main heading of the article or the blog.


<h1> Welcome to Edureka </h1>

It is used to define the main heading.


h1 - bootstrap header - edureka



H2 Header Tag

The <h2> bootstrap header tag is used to emphasize the title.


<h2> Learn Bootstrap Online! </h2>

It is used to highlight the subheadings.


bootstrap png



The <H3> tag

The <h3> header tag is used to relate the other heading to each other.

For Example:

<h3> Welcome to Edureka! </h3>




<H4> Bootstrap Header Tag

The <h4> header tag signifies the level 4 heading. It appears a bit smaller compared to the <h3> tag.


<h3> Learn Bootstrap Online! </h3>




The <H5> Heading

The <h5> heading is usually used to describe the heading levels in the Table of Content section.


<h5> Welcome to Edureka! </h5>


h5- bootstrap header - edureka



The <H6> Heading

The <H6> header tag is the last type of heading tags. It is generally not used much other than in the table of contents section.


<h6> Learn Bootstrap Online! </h6>




The Bottom Line

Finally, to differentiate the bootstrap header sizes when compared with each other, they look something like this:

<h1>Welcome to Edureka! </h1>
<h2>Learn Bootstrap Online! </h2>
<h3>Welcome to Edureka! </h3>
<h4>Learn Bootstrap Online!</h4>
<h5>Welcome to Edureka!</h5>
<h6>Learn Bootstrap Online!</h6>


output - bootstrap header - edureka




  • The header tags start from <h1> and go on till <h2>
  • The <h1> is the most important while <h6> is the least
  • Do not skip the heading levels while using the bootstrap header tags
  • Do not use the header to simply make the text look bolder or change their size.
  • All the tags are supposed to be inside the <body> tag

The browsers mentioned below support all the aforementioned tags:

  • Google chrome
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Android
  • Internet explorer
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari Mobile
  • Safari (WebKit)

With this, we have come to the end of this article. I hope you understood the different header tags.

Stay up-to-date with the latest Flutter features and best practices through our Flutter Course.

Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Got a question for us? Please mention it in the comments section of this blog and we will get back to you.

Upcoming Batches For Full Stack Developer Course (Masters Program)
Course NameDateDetails
Full Stack Developer Course (Masters Program)

Class Starts on 15th June,2024

15th June

SAT&SUN (Weekend Batch)
View Details

Join the discussion

Browse Categories

webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

How to Create a Bootstrap Header?