Tag: bootstrap 4

Limited Time Offer!

For Less Than the Cost of a Starbucks Coffee, Access All DevOpsSchool Videos on YouTube Unlimitedly.
Master DevOps, SRE, DevSecOps Skills!

Enroll Now

Bootstrap : Default Text Sizes

by vikashdev kBootstrapLeave a Comment on 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,
sans-serif;
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”

by vikashdev kBootstrapLeave a Comment on Bootstrap Utilities : “Visibility”

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

Visibility simple exampleDownload
Tagged : / / / / / / / / / / / / / / / /

Bootstrap Utilities : Spacing

by vikashdev kBootstrapLeave a Comment on Bootstrap Utilities : Spacing

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

Where property is one of:

  1. m–sets 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
Spacing simple exampleDownload
Tagged : / / / / / / / / / / / / / / /

Bootstrap: Utilities “Color”

by vikashdev kBootstrapLeave a Comment on 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: 

:- .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

bootstrap color utilities exampleDownload
Tagged : / / / / / / /

Bootstrap:-Components “Media Object”

by vikashdev kBootstrapLeave a Comment on 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.
media_objectDownload
Tagged : / / / / / / / / /

Bootstrap: Component”Button group”

by vikashdev kBootstrapLeave a Comment on 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 “Badge”

by vikashdev kBootstrapLeave a Comment on 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>
</button>
Tagged : / / / / / / / / /

Adding Bootstrap 4.4.0 CDN to HTML

by vikashdev kBootstrapLeave a Comment on 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

by vikashdev kBootstrapLeave a Comment on 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

Advantages

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

Disadvantages

  • 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 : / / / / / / /