In this segment, you will get classes for various sections like padding, margin, and some more. They assume a fundamental role in giving a gratifying format to the site. These classes are pre-fabricated and easy to utilize. Just duplicate the group you require and paste it to the code editorial manager.
Further adjustments are possible. It is entirely responsive and adaptable. Make web planning simple with the free layouts accessible in Bootstrap Rev.
For Big paddings in section's top, Use sec-pt-100. 6.25, 9.375, 12.5 stands for padding from to in rem.
<section class="sec-pt-100">padding-top: 6.25rem;</section>
<section class="sec-pt-150">padding-top: 9.375rem;</section>
<section class="sec-pt-200">padding-top: 12.5rem;</section>
For Big paddings in section's bottom, Use sec-pb-100. 6.25, 9.375, 12.5 stands for padding from to in rem.
<section class="sec-pb-100">padding-top: 6.25rem;</section>
<section class="sec-pb-150">padding-top: 9.375rem;</section>
<section class="sec-pb-200">padding-top: 12.5rem;</section>
For Big margin in section's top, Use sec-mt-100. 6.25, 9.375, 12.5 stands for margin from to in rem.
<section class="sec-mt-100">padding-top: 6.25rem;</section>
<section class="sec-mt-150">padding-top: 9.375rem;</section>
<section class="sec-mt-200">padding-top: 12.5rem;</section>
For Big margin in section's bottom, Use sec-mb-100. 6.25, 9.375, 12.5 stands for margin from to in rem.
<section class="sec-mb-100">padding-top: 6.25rem;</section>
<section class="sec-mb-150">padding-top: 9.375rem;</section>
<section class="sec-mb-200">padding-top: 12.5rem;</section>
Use the classes of padding-left to create subtle space between the left-border and the element.
For Padding Left pl-0. 1, 2, 3, 4, 5, numbers stand for 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem respectively for the padding left.
<p class="pl-0">Padding Left 0</p>
<p class="pl-1">Padding Left 0.25rem</p>
<p class="pl-2">Padding Left 0.5rem</p>
<p class="pl-3">Padding Left 1rem</p>
<p class="pl-4">Padding Left 1.5rem</p>
<p class="pl-5">Padding Left 3rem</p>
Similarly, to give the space between the right border and the content, use the padding-right classes.
For Padding right pr-0. 1, 2, 3, 4, 5, numbers stand for 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem respectively for the padding right.
<p class="pr-0">Padding Right 0</p>
<p class="pr-1">Padding Right 0.25rem</p>
<p class="pr-2">Padding Right 0.5rem</p>
<p class="pr-3">Padding Right 1rem</p>
<p class="pr-4">Padding Right 1.5rem</p>
<p class="pr-5">Padding Right 3rem</p>
The classes in this section will provide equal padding to all the sides of the content. It will be from the left, right, top, and bottom.
For Equal Padding on all sides use p-equal-0. 1, 2, 3, 4, 5, numbers stand for 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem respectively for the equal padding.
<p class="p-equal-0">Equal Padding 0</p>
<p class="p-equal-1">Equal Padding 0.25rem</p>
<p class="p-equal-2">Equal Padding 0.5rem</p>
<p class="p-equal-3">Equal Padding 1rem</p>
<p class="p-equal-4">Equal Padding 1.5rem</p>
<p class="p-equal-5">Equal Padding 3rem</p>
Here is the rundown of left-margin groups that will give the edge to one side. It will be in terms of pixels from a range of 0.25rem to 3rem.
For Margin left ml-0. 1, 2, 3, 4, 5, numbers stand for 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem respectively for the Margin left.
<p class="ml-0">margin Left 0</p>
<p class="ml-1">margin Left 0.25rem</p>
<p class="ml-2">margin Left 0.5rem</p>
<p class="ml-3">margin Left 1rem</p>
<p class="ml-4">margin Left 1.5rem</p>
<p class="ml-5">margin Left 3rem</p>
Use the classes given for aligning a margin to the right side of the element.
For Margin right mr-0. 1, 2, 3, 4, 5, numbers stand for 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem respectively for the Margin right.
<p class="mr-0">Margin Right 0</p>
<p class="mr-1">Margin Right 0.5rem</p>
<p class="mr-2">Margin Right 0.5rem</p>
<p class="mr-3">Margin Right 1rem</p>
<p class="mr-4">Margin Right 1.5rem</p>
<p class="mr-5">Margin Right 3rem</p>
To get the equivalent edge from all the sides, utilize the classes given by Bootstrap Rev. These are from .m-equal-1 to .m-equal-5 giving an equivalent edge of 0.25rem to 3rem.
For Equal Margin on all sides use m-equal-1. 1, 2, 3, 4, 5, numbers stand for 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem respectively for the equal margin.
<p class="m-equal-0">Equal Margin 0</p>
<p class="m-equal-1">Equal Margin 0.25rem</p>
<p class="m-equal-2">Equal Margin 0.5rem</p>
<p class="m-equal-3">Equal Margin 1rem</p>
<p class="m-equal-4">Equal Margin 1.5rem</p>
<p class="m-equal-5">Equal Margin 3rem</p>
From the classes of Bootstrap Rev, the designers can easily give the curvy border by the corner. It will provide an equal round radius from all the corners.
It will vary from 0.06rem to 0.6rem [1px to 10px] depending upon the class used.
For Equal Border Radius on all sides use b-radius-1.
<p class="b-radius-1">Border Radius 0.06rem</p>
<p class="b-radius-2">Border Radius 0.12rem</p>
<p class="b-radius-3">Border Radius 0.18rem</p>
<p class="b-radius-4">Border Radius 0.25rem</p>
<p class="b-radius-5">Border Radius 0.31rem</p>
<p class="b-radius-6">Border Radius 0.37rem</p>
<p class="b-radius-7">Border Radius 0.43rem</p>
<p class="b-radius-8">Border Radius 0.5rem</p>
<p class="b-radius-9">Border Radius 0.56rem</p>
<p class="b-radius-10">Border Radius 0.62rem</p>
It provides a shadow effect to the element. It will be an opacity of black color on the border of the component.
For Box Shadow use box-shadow-1. 1, 2, 3, 4, 5 numbers stand for the color transparency.
Here, box-shadow-1 is the lightest shade. The box-shadow-5 will be the most obscure shade.
<p class="box-shadow-1">Box Shadow rgba(0,0,0,0.1)</p>
<p class="box-shadow-2">Box Shadow rgba(0,0,0,0.2)</p>
<p class="box-shadow-3">Box Shadow rgba(0,0,0,0.3)</p>
<p class="box-shadow-4">Box Shadow rgba(0,0,0,0.4)</p>
<p class="box-shadow-5">Box Shadow rgba(0,0,0,0.5)</p>
Use the classes of Font Weight to bold the text as needed. You can choose to make it standard font, light font, bold font, or extra bold.
For Font Weight use font-200. 200, 300, 400, 500, 600, 700, 800, 900 numbers stand for the font-weight value.
Note: Use it in the tags used for the font. Giving these tags to the parent div might not work as expected.
Note: Make sure that, The imported font has these styles.
<p class="font-200">font-weight: 200</p>
<p class="font-300">font-weight: 300</p>
<p class="font-400">font-weight: 400</p>
<p class="font-500">font-weight: 500</p>
<p class="font-600">font-weight: 600</p>
<p class="font-700">font-weight: 700</p>
<p class="font-800">font-weight: 800</p>
To give a reasonable size to any specific font, use the classes of the font size.
For Font Size use fs-1. 1, 2, 3, 4, 5, 6, 7 numbers stand for the font-size value.
fs-1 class will give the size of 2.5rem which is equivalent to 40px.
fs-2 gives the size of 2rem which is equivalent to 32px.
fs-3 gives the size of 1.7rem which is equivalent to 27.2px.
fs-4 gives the size of 1.5rem which is equivalent to 24px.
fs-5 gives the size of 1.25rem which is equivalent to 20px.
fs-6 gives the size of 1rem which is equivalent to 16px.
fs-7 gives the size of 0.9rem which is equivalent to 14.4px.
Note: Use it in the tags used for the font. Giving these tags to the parent div might not work as expected.
<p class="fs-1">font-size: 2.5rem</p>
<p class="fs-2">font-size: 2rem</p>
<p class="fs-3">font-size: 1.7rem</p>
<p class="fs-4">font-size: 1.5rem</p>
<p class="fs-5">font-size: 1.25rem</p>
<p class="fs-6">font-size: 1rem</p>
<p class="fs-7">font-size: 0.9rem</p>
Get the colors as used in the website theme. One can use the shades of their color palette using the classes here.
For Primary Background Color of the theme use bg-theme-primary.
For Secondary Background Color of the theme use bg-theme-secondary.
For Gradient Background Color of the theme use bg-theme-gradient.
Note: The gradient is set to 45 degrees.
<p class="bg-theme-primary">background-color: var(--primarycolor)</p>
<p class="bg-theme-secondary">background-color: var(--secondarycolor)</p>
<p class="bg-theme-gradient">background-color: background-color: linear-gradient(45deg, var(--primarycolor) 0%, var(--secondarycolor) 100%)</p>
Background image sizes adjustments on the go can increase the speed of you making website faster.
Use bg-auto class to make background size auto.
Use bg-initial class to make background size initial.
Use bg-inherit class to make background size inherit.
Use bg-cover class to make background size cover.
Use bg-contain class to make background size contain.
<p class="bg-auto" style="https://bootstraprev.com/img/divider-section-example-by-bootstrap-rev.jpg">background-size: auto</p>
<p class="bg-initial" style="https://bootstraprev.com/img/divider-section-example-by-bootstrap-rev.jpg">background-size: inbg-initial</p>
<p class="bg-inherit" style="https://bootstraprev.com/img/divider-section-example-by-bootstrap-rev.jpg">background-size: inhebg-inherit</p>
<p class="bg-cover" style="https://bootstraprev.com/img/divider-section-example-by-bootstrap-rev.jpg">background-size: cover</p>
<p class="bg-contain" style="https://bootstraprev.com/img/divider-section-example-by-bootstrap-rev.jpg">background-size: contain</p>
Positioning Background image with pre made css classes provided by bootstrap rev.
Use bg-center class to make background position center.
Use bg-top-center class to make background position top center.
Use bg-right-center class to make background position right center.
Use bg-bottom-center class to make background position bottom center.
Use bg-left-center class to make background position left center.
<p class="bg-center" style="https://bootstraprev.com/img/divider-section-example-by-bootstrap-rev.jpg">background-position: center center</p>
<p class="bg-top-center" style="https://bootstraprev.com/img/divider-section-example-by-bootstrap-rev.jpg">background-position: top center</p>
<p class="bg-right-center" style="https://bootstraprev.com/img/divider-section-example-by-bootstrap-rev.jpg">background-position: right center</p>
<p class="bg-bottom-center" style="https://bootstraprev.com/img/divider-section-example-by-bootstrap-rev.jpg">background-position: bottom center</p>
<p class="bg-left-center" style="https://bootstraprev.com/img/divider-section-example-by-bootstrap-rev.jpg">background-position: left center</p>
Get the colors as used in the website theme. One can use the shades of their color palette using the classes here.
For Primary Text Color of the theme use text-primary.
For Secondary Text Color of the theme use text-secondary.
<p class="text-primary">color: var(--primarycolor)</p>
<p class="text-secondary">color: var(--secondarycolor)</p>
Use the classes from List Group to give inherited group listing.
Simply add list-dot-wrapper in the main ul to have simple list group.
Note: The designer can create a listing up to the 4th level.
First Level listing
Second Level Listing
Third Level Listing
Fourth Level Listing
<ul class="list-dot-wrapper">
<li>
<p>First Level listing</p>
<ul>
<li>
<p>Second Level Listing</p>
<ul>
<li>
<p>Third Level Listing</p>
<ul>
<li>
<p>Fourth Level Listing</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Position the elements as per content's and design's need.
Use position-relative class to make an HTML element relative.
Use position-absolute class to make an HTML element absolute.
Use position-fixed class to make an HTML element fixed.
To fill the absolute or fixed content to viewport or relative element use c-fill class.
<p class="position-relative">position: relative</p>
<p class="position-absolute">position: absolute</p>
<p class="position-fixed">position: fixed</p>
<p class="c-fill">top: 0;
bottom: 0;
right: 0;
left: 0;</p>
Layring elements in HTML is another trend for modren website design. Layring can be done with giving specific z-index to different elements, Here Bootstrap rev is provind pre made classes to target z-index depending upon your needs.
For z index use z-index-1. 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 numbers stand for the z-index value.
z-index-1 class will give the z-index of 100.
z-index-2 class will give the z-index of 200.
z-index-3 class will give the z-index of 300.
z-index-4 class will give the z-index of 400.
z-index-5 class will give the z-index of 500.
z-index-6 class will give the z-index of 600.
z-index-7 class will give the z-index of 700.
z-index-8 class will give the z-index of 800.
z-index-9 class will give the z-index of 900.
z-index-10 class will give the z-index of 1000.
<p class="z-index-1">z-index: 100</p>
<p class="z-index-2">z-index: 200</p>
<p class="z-index-3">z-index: 300</p>
<p class="z-index-4">z-index: 400</p>
<p class="z-index-5">z-index: 500</p>
<p class="z-index-6">z-index: 600</p>
<p class="z-index-7">z-index: 700</p>
<p class="z-index-8">z-index: 800</p>
<p class="z-index-8">z-index: 800</p>
<p class="z-index-10">z-index: 1000</p>