The post Bootstrap : Default Text Sizes appeared first on scmGalaxy.

The post Bootstrap Utilities : “Visibility” appeared first on scmGalaxy.

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

The post Bootstrap Utilities : Spacing appeared first on scmGalaxy.

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.

The post Bootstrap: Utilities “Color” appeared first on scmGalaxy.

• 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.

The post Bootstrap:-Components “Media Object” appeared first on scmGalaxy.

• 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.

The post Bootstrap: Component”Button group” appeared first on scmGalaxy.

• 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.

The post Bootstrap: Component”Buttons” appeared first on scmGalaxy.

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

The post Bootstrap: Component “Badge” appeared first on scmGalaxy.

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

The post Adding Bootstrap 4.4.0 CDN to HTML appeared first on scmGalaxy.

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).

The post Bootstrap 4.4.0 appeared first on scmGalaxy.