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

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.

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

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.