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

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

Change the alignment of elements with the vertical-alignment utilities.

These are the classes:- .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.

The post Bootstrap utilities : “Vertical align” 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.

• .fixed-top class is use to fix the element in the top position of the page.
• .fixed-bottom class is use to fix the element in the bottom position of the page.
• .sticky-top class is use to stick the element at the top of the page when you scroll past it.

The post Bootstrap utilities : “Position” appeared first on scmGalaxy.

Where to use Progress Bar:-

• Progress Bar With Label by placing text within the .progress-bar.
• Progress Bar With Height.
• Colored Progress Bar by using .progress-bar-sucess|info|warning|danger.
• Striped Progress Bar by using .progress-bar-striped class.
• Animated Progress Bar by using .active class.
• Stacked Progress Bars by using <div class=”progress”>.

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

Format of nav bar:-

• Vertical Navbar by using class=”navbar-nav”.
• Centered Navbar by using .justify-content-center class to center the navigation bar.
• Colored Navbar by using any of the .bg-color classes to change the background color of navbar.
• Brand/Logo by using .navbar-brand class is used to highlight the brand/logo/project name of your page.
• Collapsing The navbar  To create a collapsible navigation bar, use a button with class=”navbar-toggler”, data-toggle=”collapse” and data-target=”#thetarget”.
• Navbar With Dropdown.
• Navbar Froms and Buttons Add a <form> element with class=”form-inline” to group inputs and buttons side-by-side.
• Nevbar Text use .navbar-text class to vertically align any elements inside the navbar that are not links.
• Fixed Navbar by using .fixed-top or .fixed-bottom class to make the navbar fixed.
• Sticky navbar use the .sticky-top class to make the navbar fixed/stay at the thop of the page.

The post Bootstrap:-Component “Navigation bar” 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.

features:-

• Basic items simply making for list.
• Active items used for showing it’s an active mode.
• Disabled items used for just reading that message.
• Links and buttons are used to create actionable list group items with hover.
• Flush / Remove Borders are used to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (card).
• Horizontal to change the layout of list group items from vertical to horizontal across all breakpoints.
• Contextual classes to style list items with a stateful backgrond and color.
• With badges to show unread counts, activity .
• Custom content by the help of flexbox utilities.
• JavaScript behavior to create tabbable panes of local content.
• Using data attributes use for activate a list group navigation without writing any javaScript by simply specifying data-toggle=”list” or on an element.

The post Bootstrap:-Component “List group” appeared first on scmGalaxy.

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Functions:-

• Sizing classes to the .input-group itself and contains within will automatically resize for each element.
• Checkboxes and radios options within an input group’s addon instead of text.
• Multiple inputs are only available for input gropus with a single inpute.
• Multiple addons are supported and can be mixed with checkbox and radio input versions and many more others things as well.
• Button addons are supported and can be mixed with multiple buttons and input text.
• Buttons with dropdowns are needed within a single line inpute.
• Segmented buttons means button and then inside button a dropdown menu and text area there.
• Customer forms button area and an option area.
• Customer file input are most important for uploading a file or image etc.

The post Bootstrap:-Component “Input group” appeared first on scmGalaxy.

• Stacked form
• Inline form

Stacked form(full-width):-

Inline form:-

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

For creating a dropdown menu

• The class dropdown indicates a dropdown menu.
• To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle=”dropdown” attribute.
• arrow icon () used inside button .caret class in span tag.
• And then .dropdown-menu class inside <ul> or <ol> element to actually build the dropdown menu.

Styles for using the dropdown to look fabulous:-

• Dropdown Divider (This class is used to separate links inside the dropdown menu with a thin horizontal borde)
• Dropdown Header (This class is used to add headers inside the dropdown menu)
• Disable and Active items (This class is used to Highlight a specific dropdown item) 
• Dropdown Position (This class is used to adjust the dropdown on the left or right side)
• Dropup (This class is used to the dropdown menu to expand upward direction)
• Dropdown Menu Right/left (This class is used to adjust the menu whether its place is right or left )

The simple way to create a dropdown

Divider & header use:-

Disable and Active items & Dropdown Position use:-

Dropup

Dropdown Menu Right use:-

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

Usage

The collapse plugin utilizes a few classes to handle the heavy lifting:-

• .collapse hides the content.
• .collapse.show shows the content.
• .collapsing is added when the transition starts, and removed when it finishes.

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

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

• A card in Bootstrap 4 is a bordered box with some padding around its content.
• It includes options for headers, footers, content, colors, etc.
• A basic card is created with the .card class.
• The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card.
• add a background color the card, use contextual classes. ( .bg-primary, .bg-success……).
• Add .card-img-top or .card-img-bottom to an <img> to place the image at the top or at the bottom inside the card.
• Add the .stretched-link class to a link inside the card.
•  .card-img-overlay to add text on top of the image.
• The .card-columns class creates a masonry-like grid of cards.
• .card-deck class creates a grid of cards that are of equal height and width.
• The cards are displayed vertically on small screens (less than 576px).
• The .card-group class is similar to .card-deck. The only difference is that the .card-group class removes left and right margins between each card.

Syntax:-

<div class="card">
  <div class="card-body">Basic card</div>
</div>

Creat a profile:

The post Bootstrap: Component “Card” 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.

How to create a breadcrumb navigation

1.Add in HTML.

2.Add in CSS.

Add in HTML:-

In HTML you have to create breadcrumb in internal CSS means inside the head tag.

Add in CSS:-

Putting all the style code inside CSS.

The post Bootstrap: Component “Breadcrumb” 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.

Alerts are created with the .alert class, followed by one of the contextual classes .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark.

Syntax:-

<div class="alert alert -success">
<p> inside paragraph alert success component use </p>
</div>

Alert Links:-

Add the alert-link class to any links inside the alert box to create “matching colored links”.

syntax:-

<div class="alert alert-success">
  Alert link use <a href="#" class="alert-link">this is a link</a>.
</div>

Closing Alerts:-

To close the alert message, add a .alert-dismissible class to the alert container. for creating alert messages we have to create a button or link, inside button or link adds class=”close” and data-dismiss=”alert”.

syntax:-

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">×</button>
  this is a message.
</div>

Animated Alerts:-

The .fade and .show classes add a fading effect when closing the alert message.

this class is use to delete anything(text,div,message-box).

Syntax:-

<div class="alert alert-danger alert-dismissible fade show">

The post Bootstrap 4.4.0 Component “Alerts” appeared first on scmGalaxy.