Picking a suitable heading design is perhaps the stiff part. It generally occupies a ton of time to get an inventive thought. For website designers, it is more similar to ascending mountains. The one-stop-solution for such issues, Bootstrap Rev, has carried its assortment of going to beautify your site and make it enticing.
One can duplicate the code to get the ideal heading style. You can likewise adjust it. Utilize the forms offered here to design the titles, captions of the site.
Directly copy and paste the code into your code editor. The designers can modify the layout as per their needs.
heading-s1 class is for the headings of Underline design.
heading-s2 is for the titles of Underline dot design.
heading-s3 category is for the Top subheading design.
heading-s4 group is for the Split heading design.
heading-s5 class is for the headings of Box left design.
heading-s6 is for the titles of Box right design.
heading-s7 is for the Bottom subheading design.
By default, the alignment of the heading is on the left side of the screen.
Note: The code composed under the span label will work just with it. If using some other tag, it will not work as expected.
underline heading are very simple and straightforward to give the clean and comfy look to the website. It;s as easy as copying the code and pasting in your website to show a beautiful clean eading design.
Use heading-s1 h1:before class target and change the background colors to your needs. By default it will be primary color of your theme.
The heading of this style is a straightforward but exemplary one with an underline. It gives a moderate impact with quality design. Duplicate the code and change it according to the longing.
<div class="heading-s1">
<h1>
Beautiful Creative
</h1>
</div>
To align the headline at the center, use the heading-s1-center class. It will not only bring the title at the center of the screen, but it will also create a beautiful underline heading style.
<div class="heading-s1 heading-s1-center">
<h1>
Beautiful Creative
</h1>
</div>
Aligning the same style of heading at the right, use heading-s1-right class. One can also change the color of the design.
<div class="heading-s1 heading-s1-right">
<h1>
Beautiful Creative
</h1>
</div>
Introducing simple yet creative heading designs by Bootstrap Rev. Simple heading with a thin half underline and small dot at the end to stand the heading out from all other texts in the website.
Use heading-s2 h1:before class target and change the background colors to your needs. By default it will be primary color of your theme.
Get a fine dot at one of the tips of the underline. It is equivalent to the above design. There is only a slight difference of a spot in it. It gives a full completing look to the layout.
As a matter of course, the title is on the left side. Thus, there is no compelling reason to add any additional classes. Only add heading-s2 class to get the style.
<div class="heading-s2">
<h1>
Beautiful Creative
</h1>
</div>
One can also align the title design of underline with a dot. To position it at the center of the screen, use the classes heading-s2-center
<div class="heading-s2 heading-s2-center">
<h1>
Beautiful Creative
</h1>
</div>
To align the design at the right side of the screen, use the classes heading-s2-right.
Step 1: Use .heading-s2 h1:before class target and change the background-color to your theme color.
<div class="heading-s2 heading-s2-right">
<h1>
Beautiful Creative
</h1>
</div>
Let's get more creative with the headings to make our important section stand out and to attract user eye. In here the sub heading will be shown on the top of primary heading with theme color gradient.
Target Main Heading/Border: Use .heading-s3 h1 class to taget main heading style.
Target Sub Heading: Use .heading-s3 h1 .sub-headline class to target sub heading style.
Having a heading with a sub-heading is a choice of many web designers. In this design, the sub-heading will appear at the top of the primary title. Also, the sub-heading will have a colored background.
To use the heading design of this style, use heading-s3 class. The sub-heading is written under the span tags with a class name of sub-headline.
<div class="heading-s3">
<h1>
Beautiful Creative
<span class="sub-headline">
Lorem ipsum dolor sit amet
</span>
</h1>
</div>
Since the headings are naturally on the left side, if the originator wishes to position it at the center, they need to utilize heading-s3-center.
<div class="heading-s3 heading-s3-center">
<h1>
Beautiful Creative
<span class="sub-headline">
Lorem ipsum dolor sit amet
</span>
</h1>
</div>
To align the same heading at the right side of the screen, the designers need to use heading-s3-right. If one needs to change the primary title, change the content inside the h1 tag. If they need to change the sub-heading, they can supplant the content inside the span tag.
<div class="heading-s3 heading-s3-right">
<h1>
Beautiful Creative
<span class="sub-headline">
Lorem ipsum dolor sit amet
</span>
</h1>
</div>
The titles of this layout make an eye-catching sway on the user. It is a fine and minimal heading web design, loved by numerous people groups. The primary portion of the layout is straightforward. The other half has a background color. There is a delicate borderline. It is of the background color of the other half, making it more alluring.
There are nested span tags. One of them is a simple span tag with the first part of the heading(without background color). The second part has a background color, the same as the theme color. It has a sub-heading class.
Target Main Heading/Border: Use .heading-s4 h1 class to taget main heading style.
Target Sub Heading: Use .heading-s4 h1 span.sub-heading class to target sub heading style.
By default, the positioning of the heading is at the left. So, there is no compelling reason to add any extra classes. Employ heading-s4 to get this design. The other portion of the layout is under the span label else it will not work as expected.
<div class="heading-s4">
<h1>
<span>Beautiful</span> <span class="sub-heading">Creative</span>
</h1>
</div>
For positioning the split heading at the center, there needs to include an additional class. It will be heading-s4-center.
<div class="heading-s4 heading-s4-center">
<h1>
<span>Beautiful</span> <span class="sub-heading">Creative</span>
</h1>
</div>
Positioning this title design on the right side is also easy. It will just need the two classes heading-s4-right.
<div class="heading-s4 heading-s4-right">
<h1>
<span>Beautiful</span> <span class="sub-heading">Creative</span>
</h1>
</div>
Innovative thought is to give a 33% box over the title, covering from the left side. The design is before you. One can likewise add a subheading. The sub-heading will show up at the lower part of the heading.
Target Border: Use .heading-s5 h1:before class to taget border of the heading.
The designer can position it at the left, so you don’t need to include any classes. Simply use the heading-s5 class inside the div tag to get it. There is a span class for the sub-heading. The class name for this span tag is sub-heading.
<div class="heading-s5">
<h1>
Beautiful Creative
<span class="sub-heading">
Lorem, ipsum dolor sit amet adipisicing
</span>
</h1>
</div>
Use the heading-s5-center class to position the design at the center of the screen. The crate will stay on the left side while the whole layout moves towards the middle.
<div class="heading-s5 heading-s5-center">
<h1>
Beautiful Creative
<span class="sub-heading">
Lorem, ipsum dolor sit amet adipisicing
</span>
</h1>
</div>
The alignment is also possible in the right position. It is possible by using the classes heading-s5-right. Accordingly, modify the code after copying it.
<div class="heading-s5 heading-s5-right">
<h1>
Beautiful Creative
<span class="sub-heading">
Lorem, ipsum dolor sit amet adipisicing
</span>
</h1>
</div>
This design is somewhat similar to the above one. There is just a slight difference between the two. In the above layout, the case was covering the left part of the title. This design will cover the right-part of the heading.
Target Border: Use .heading-s6 h1:before class to taget border of the heading.
The design can be fetched using the heading-s6 class inside the div tag. Moreover, there is a tag with a class name of sub-heading used. In the span tag, you can write the sub-heading.
<div class="heading-s6">
<h1>
Beautiful Creative
<span class="sub-heading">
Lorem, ipsum dolor sit amet adipisicing
</span>
</h1>
</div>
To align this design at the center of the screen, use heading-s6-center class. Modify the content as per the requirement.
<div class="heading-s6 heading-s6-center">
<h1>
Beautiful Creative
<span class="sub-heading">
Lorem, ipsum dolor sit amet adipisicing
</span>
</h1>
</div>
The design can also be position on the right side. You need to add the heading-s6-rightclass. One can change the color of the pattern by the step given ahead.
<div class="heading-s6 heading-s6-right">
<h1>
Beautiful Creative
<span class="sub-heading">
Lorem, ipsum dolor sit amet adipisicing
</span>
</h1>
</div>
The design of this category is having a heading with a sub-heading. The sub-heading appears at the bottom of the primary title. Plus, the background shade of the sub-heading is equivalent to that of the theme shade.
Target Sub Heading: Use .heading-s7 span.sub-heading class to taget sub heading.
The positioning is on the left side, with the sub-heading also appearing at the left. One needs to add the heading-s7 class in the div tag to access this design. There is also a span class with a sub-heading class name, where the sub-heading appears.
<div class="heading-s7">
<h1>
Beautiful Creative
</h1>
<span class="sub-heading">
Sub Heading
</span>
</div>
One can align the design at the focal point of the screen. With positioning the heading at the center, the subheading will also appear at the center of the design layout.
Use the heading-s7-centerclass to achieve this design. Customization is likewise simple.
<div class="heading-s7 heading-s7-center">
<h1>
Beautiful Creative
</h1>
<span class="sub-heading">
Sub Heading
</span>
</div>
To position, at the right side of the screen, use heading-s7-rightclass. The sub-heading will likewise adjust towards the right, showing up at the lower part of the primary heading.
<div class="heading-s7 heading-s7-right">
<h1>
Beautiful Creative
</h1>
<span class="sub-heading">
Sub Heading
</span>
</div>