bootstrap 4 Archives

Bootstrap : Default Text Sizes

by vikashdev kSeptember 27, 2021September 27, 2021BootstrapLeave a Comment

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 / Class	Default Font size
body	16px; line-height: 1.5; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
p, li	1rem / 16px
h1	2.5rem / 40px
h1 small	80% / 32px
h2	2rem / 32px
h2 small	80% / 25.6px
h3	1.75rem / 28px
h3 small	80% / 22.4px
h4	1.5rem / 24px
h4 small	80% / 24px
h5	1.25rem / 20px
h5 small	80% / 16px
h6	1rem / 16px
h6 small	80% / 12.8px
.display-1	6rem / 90px
.display-2	5.5rem / 82.5px
.display-3	4.5rem / 67.5px
.display-4	3.5rem / 52.5px

Bootstrap Utilities : “Visibility”

by vikashdev kSeptember 25, 2021September 25, 2021BootstrapLeave a Comment

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

Visibility simple example Download

Tagged : Bootstrap / bootstrap 4 / bootstrap components / bootstrap utilities / bootstrap utilities visibility / Guide / Perforce / Process / scmgalaxy / scmgalaxy bootstrap / scmgalaxy bootstrap utilities / scmGalaxy DevOps Training Online / scmgalaxy tutorials bootstrap 4 utilities / Tutorial / visibility in bootsttrap4 / visibility utilities in bootstrap / What

Bootstrap Utilities : Spacing

by vikashdev kSeptember 24, 2021September 24, 2021BootstrapLeave a Comment

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

Where property is one of:

m–sets margin
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 example Download

Tagged : Bootstrap / bootstrap 4 / bootstrap utilities spacing / Guide / How / HTML / Perforce / Process / scmgalaxy / scmGalaxy DevOps Training Online / scmGalaxy Tutorials / scmgalaxy tutorials bootstrap 4 utilities / spacing utilities in bootstrap / spacing utilities in bootstrap4 / Tutorial / What

Bootstrap: Utilities “Color”

by vikashdev kSeptember 11, 2021September 11, 2021BootstrapLeave a Comment

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 example Download

Tagged : bootstrap 4 / bootstrap utilities in color / Guide / Process / scmgalaxy / scmGalaxy Tutorials / Tutorial / What

Bootstrap:-Components “Media Object”

by vikashdev kAugust 30, 2021August 30, 2021BootstrapLeave a Comment

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_object Download

Tagged : basic media object in bootstrap / Bootstrap / bootstrap 4 / Guide / How / media object in bootstrap / nested media object in bootstrap / Process / top media or bottom alignment in bootstrap / Tutorial

Bootstrap: Component”Button group”

by vikashdev kAugust 20, 2021August 20, 2021BootstrapLeave a Comment

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.

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 / bootstrap 4 / button group in bootstrap / button groups in bootstrap4 / Guide / justified button in bootstrap / nesting button group in bootstrap / Perforce / Process / split button dropdowns in bootstrap / Tutorial / vertical button in bootstrap

Bootstrap: Component”Buttons”

by vikashdev kAugust 19, 2021August 19, 2021BootstrapLeave a Comment

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 : active /disabled buttons in bootstrap / active button in bootstrap / block level buttons in bootstrap / Bootstrap / bootstrap 4 / button color in bootstrap / button outline in bootstrap / button size in bootstrap / button style in bootstrap / button width in bootstrap / buttons in bootstrap / disable button in bootstrap / Guide / Process / spinner buttons in bootstrap / spinner used in active/disabled buttons in bootstrap / Tutorial

Bootstrap: Component “Badge”

by vikashdev kAugust 18, 2021August 20, 2021BootstrapLeave a Comment

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 : badge / badge component in bootstrap / Bootstrap / bootstrap 4 / contextual badges / Guide / inside button badge component use / pill badges / Process / Tutorial

Adding Bootstrap 4.4.0 CDN to HTML

by vikashdev kAugust 17, 2021August 18, 2021BootstrapLeave a Comment

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 / bootstrap 4 / bootstrap 4.4.0 cdn to html / bootstrap cdn / cdn / cdn for css and js / Guide / Process / Tutorial

Bootstrap 4.4.0

by vikashdev kAugust 17, 2021August 17, 2021BootstrapLeave a Comment

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 : advantage and disadvantage of bootstrap / Bootstrap / bootstrap 4 / bootstrap 4.4.0 / Guide / Tutorial / what is bootstrap / why use bootstrap