Rapidly plan and alter responsive portable first locales with heaven, the new front-end open source structure responsive matrix framework, broad prebuilt parts, and incredible JavaScript modules.
Quick Start
Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files?.
HTML Starter Template
Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
A website layout is a pattern (or framework) that defines a website's structure. It has the role of structuring the information present on a site both for the website's owner and for users.
Box Body
Box Body are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
<div class="box-body">
<!-- Content here -->
</div>
Grid
Grid is a pure HTML tag that can be used to box the layout of your blog. It works out of the box, but you can create your own look using grid-specific classes.
<div class="d-grid">
<!-- Content here -->
</div>
Center Div
<div class="center-box">
</div>
Margin
CSS Margin property is utilized to characterize the space around components. It is totally straightforward and doesn't have any foundation tone. It clears a region around the component. Top, base, left and right edge can be changed freely utilizing separate properties.
<div class="m-1">
<!-- Content here -->
</div>
Margin Table
Margin Type
Class
Max Value
Margin
m-1
m-5
Margin Top
mt-1
mt-5
Margin bottom
mb-1
mb-5
Margin left
ml-1
ml-5
Margin Right
mr-1
mr-5
Margin Left-Right
mx-1
mx-5
Margin Top-bottom
my-1
my-5
padding
A component's cushioning region is the space between its substance and its line. Note: Padding makes additional room inside a component. Interestingly, edge makes additional room around a component.
<div class="p-1">
<!-- Content here -->
</div>
Padding Table
Padding Type
Class
Max Value
padding
p-1
p-5
padding Top
pt-1
pt-5
padding bottom
pb-1
pb-5
padding left
pl-1
pl-5
padding Right
pr-1
pr-5
padding Left-Right
px-1
px-5
padding Top-bottom
py-1
py-5
Text
CSS text designing properties is utilized to organize text and style text. Text-shading property is utilized to set the shade of the text.
Headings
<span class="hs-1"> Your Heading </span>
<span class="hs-2"> Your Heading </span>
<span class="hs-3"> Your Heading </span>
<span class="hs-4"> Your Heading </span>
<span class="hs-5"> Your Heading </span>
Paragraph
<span class="para-1"> Your paragraph start here </span>
<span class="para-2"> Your paragraph start here </span>
<span class="para-3"> Your paragraph start here </span>
Text alignment
<div class="text-center"> Text alignment center </div>
<div class="text-left"> Text alignment left </div>
<div class="text-right"> Text alignment right </div>
<div class="text-justify"> Text alignment justify </div>
Text Effects
<p class="text-mute"> Text effect Muted </p>
<p class="text-magic"> Text effect magic </p>
<p class="text-signature"> Text effect signature </p>
Text Colors
<p class="text-dark"> Dark Text Color </p>
<p class="text-light"> Light Text Color </p>
Components
Alerts
Alarms are accessible for any length of text, just as a discretionary close button. For appropriate styling, utilize one of the eight required context oriented classes.
