Bootstrap : Default Text Sizes

Bootstrap’s font sizes are calculated off of the body font size by using rem values. If you change
the body font size all styles will be increased/decreased automatically. Rem stands for “root em”
because it calculates the size based on the size of the root of the document or body tag.

Tag / ClassDefault Font size
body16px; line-height: 1.5;
font-family: “Helvetica Neue”, Helvetica, Arial,
p, li1rem / 16px
h12.5rem / 40px
h1 small80% / 32px
h22rem / 32px
h2 small80% / 25.6px
h31.75rem / 28px
h3 small80% / 22.4px
h41.5rem / 24px
h4 small80% / 24px
h51.25rem / 20px
h5 small80% / 16px
h61rem / 16px
h6 small80% / 12.8px
.display-16rem / 90px
.display-25.5rem / 82.5px
.display-34.5rem / 67.5px
.display-43.5rem / 52.5px
Tagged : / / / / / / / / / / / / /

Bootstrap Utilities : “Visibility”

With visibility utilities you have control the visibility, without modifying the display, of elements.

Tagged : / / / / / / / / / / / / / / / /

Bootstrap Utilities : Spacing

Spacing helpers are useful for modifying the padding and margin of an element.

Where property is one of:

  1. msets margin
  2. p-sets padding

Sides is one of:-

  • t-sets margin-padding “top
  • b-sets margin-padding “bottom
  • l-sets margin-padding “left
  • r-sets margin-padding “right
  • x-sets padding left|right or margin left|right
  • y-sets padding top|bottom or margin top|bottom
  • blank-sets margin padding on all sides of the element

Size is one of:-

  • 0-sets m|p to 0
  • 1-sets m|p to .25rem
  • 2-sets m|p to .5rem
  • 3-sets m|p to 1rem
  • 4-sets m|p to 1.5rem
  • 5-sets m|p to 3rem
  • auto-sets margin to auto

Negative margin :-

  • n1-sets margin to -.25rem
  • n2-sets margin to -.5rem
  • n3-sets margin to -1rem
  • n4-sets margin to -1.5rem
  • n5-sets margin to -3rem
Tagged : / / / / / / / / / / / / / / /

Bootstrap: Utilities “Color”

Check the enhanced Bootstrap 4 Text colors — Convey meaning through color with a handful of color utility classes.

The classes for text colors are:

:- .text-muted, .text-primary.text-success.text-info.text-warning.text-danger, .text-secondary.text-white.text-dark.text-body (default body color/often black) and .text-light.

The classes for background colors are: 

:- and .bg-light.

Tagged : / / / / / / /

Bootstrap:-Components “Media Object”

Bootstrap provides an easy way to align media objects (like images or videos) together with content. Media objects are often used to display blog comments, tweets, and so on.

  • Basic media Object :- class=media class to a container element and place media content inside a child container with class=media-body.
  • Nested Media Object :- Media object can also be nested(media object inside media).
  • Right-Aligned Media Image :- to right-aligned media image class=media-body.
  • Top, Middle or Bottom Alignment :- Use the flex utilities, class=align-self-(start/center/end) classes to place the media object on the top, middle or at the bottom.
Tagged : / / / / / / / / /

Bootstrap: Component”Button group”

Bootstrap Button Groups:

  • Button Groups.
  • Vertical Button Groups.
  • Justified Button Groups.
  • Nesting Button Groups & Dropdown Menus.
  • Split Button Dropdowns.

Button Groups:

Bootstrap allows you to group a series of buttons in a button group. Use a <div> element with class .btn-group to create a button group.

# Applying button sizes to every button in a group by .btn-group-lg|sm|xs.

Vertical Button Groups:

Use the class .btn-group-vertical to create a vertical button group.

Justified Button Groups:

To span, the entire width of the screen, use the class .btn-group-justified.

Nesting Button Groups & Dropdown Menus:

Nest button groups to create dropdown menus.

Split Button Dropdowns:

 Split button dropdowns use the same general style as the dropdown button but add a primary action along with the dropdown. If you deleted the span parts then, the dropdown menu shows you half because you create a dropdown menu but not to call.

Tagged : / / / / / / / / / / /

Bootstrap: Component”Buttons”

Bootstrap 4 provides users with different styles of buttons.

  • Button Color.
  • Button Outline.
  • Button Size.
  • Block level Buttons.
  • Active/Disabled Buttons.
  • Spinner Buttons.

Button color:

 Use the background-color property to change the background color of a button.

Button Outline:

The button outline style removes all background images or colors from a button and gives it a lighter look.

Button Sizes:

This will indicate to you the size of the button.

  • Default
  • Large (btn-lg)
  • Small (btn-sm)

Block Level Buttons:

The .btn-block class is used to create a block-level button that spans the entire width of the parent elements.

Active/Disabled Buttons:

A button can be set to an active (clickable) or a disabled (unclickable) state.

Spinner Buttons:

You can also add “spinners” to a button.

Tagged : / / / / / / / / / / / / / / / /

Bootstrap: Component “Badge”

Badges are similar to labels; the primary difference is that the corners are more rounded. Badges are mainly used to highlight new or unread items. Example:-

<h1>Example heading <span class=" badge-secondary">New</span></h1>

Contextual Badges:

Contextual classes use to change the color of a badge. Example:-

<span class="badge badge-primary">Primary</span>

Pill Badges:-

Use the .badge-pill class to make the badges more round. Example:-

<span class="badge badge-pill badge-primary">Primary</span>

Badge inside an Element(button):-

An example of using a badge inside a button.

<button type="button" class="btn btn-primary">
  create button <span class="badge badge-light">1</span>
Tagged : / / / / / / / / /

Adding Bootstrap 4.4.0 CDN to HTML

For css:

For js:

JS is only necessary if you plan on using one or all of the following components: Alerts, Buttons, Carousel, Collapse, Dropdowns, Modals, Navbar, Tooltips, and Scrollspy.

Css & js

This code will help you lot

Tagged : / / / / / / / /

Bootstrap 4.4.0

Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Bootstrap 4 is completely free to download and use! Bootstrap 4 with new components, a faster stylesheet, and more responsiveness.

What is Bootstrap?

  • Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing a responsive and mobile-friendly website.
  • It is a free font-end framework (HTML and CSS) for faster and easier web development.
  • Bootstrap is famous for being development with components that have the ability to follow the property of responsive designs.
  • It gives you the ability to easily create responsive designs.

Advantage and Disadvantage


  • Works in all modern browsers(IE9+,chrome,safari,mozilla e.t.c)
  • Rapid development
  • Fully and easily customizable
  • Comes with jquery plugins.


  • My new website looks just like everyone else’s !
  • No backward compatibility in between versions
  • Using Bootstrap for existing websites is a tedious task.
  • You will likely not be earning any money for quite a while.

Why Use Bootstrap?

  • Easy to use : Anybody with just basic knowledge of HTML and CSS can start using Bootstrap.
  • Responsive features : Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops.
  • Mobile-first approach : In Bootstrap, mobile-first styles are part of the core framework.
  • Browser compatibility : Bootstrap 4 is compatible with all modern browsers (Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera).
Tagged : / / / / / / /