bootstrap4 Archives

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 utilities : “Vertical align”

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

Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

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.

vertical align easy example Download

Bootstrap:-Component “Progress”

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

Progress Bar in Bootstrap 4 is mainly used to indicate to the user, how much progress of the process is done. progress bars featuring support for stacked bars, animated backgrounds, and text labels. Use utility classes for the background (bg-success, bg- info, bg-light, bg-dark, bg-danger, bg-warning) for creating a progress bar with a different color.

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

progress bar example Download

Tagged : Animated progress bar in bootstrap / Bootstrap / bootstrap4 / Guide / How / Perforce / progress b ar with height in bootstrap / progress bar in bootstrap4 / progress bar with label in bootstrap / scmGalaxy Tutorials / Striped progress bar / Tutorial

Bootstrap:-Component “Navigation bar”

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

The navbar is one of the prominent features of Bootstrap sites. A navigation bar is a navigation header that is placed at the top of the page. the navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class.

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.

navbar with all examples Download

Tagged : .navbar class in bootstrap / Bootstrap / bootstrap component navbar / bootstrap components / bootstrap4 / brand/logo in navbar / fixed navbar in top or bottom in bootstrap / Guide / How / navbar in bootstrap / navbar in bootstrap4 / Process / sticky-top in bootstrap / Tutorial

Bootstrap:-Component “List group”

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

List groups are a flexible and powerful component for displaying a series of content.

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.

Creating_cool_list_group_with_some links/message etc.Download

Tagged : badges in bootstrap / Bootstrap / bootstrap4 / custom content in bootstrap / flush in bootstrap / horizontal list group in bootstrap / How / list group in bootstrap / Process / remove borders in bootstrap / Tutorial / What / what is list group in bootstrap4

Bootstrap:-Component “Forms”

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

Bootstrap provides two types of form layout:-

Stacked form
Inline form

Stacked form(full-width):-

Inline form:-

Tagged : Bootstrap / bootstrap4 / Guide / How / inline form in bootstrap / Process / Stacked in bootstrap / Tutorial / types of form in bootstrap / What

Bootstrap:-Component “Dropdowns”

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

Dropdown menu is a toggleable menu that allows users to choose one value from a predefined list. Sometimes it helps the users to same time for finding some particular things.

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

Tagged : Bootstrap / bootstrap4 / components of bootstrap / crate a dropdown menu in button / disable and active items / dropdown / dropdown divider / dropdown header / dropdown in bootstrap / dropdown position / dropdowns / dropup in bootstrap / Guide / Process / Tutorial / What

Bootstrap:-Component “Collapse”

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

The collapse JavaScript plugin is used to show and hide content.

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.

Tagged : Bootstrap / bootstrap4 / collapse in bootstrap / collapse in link in bootstrap / Guide / How / Process / Tutorial / What

Bootstrap:-Component “Carouse”

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

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Tagged : Bootstrap / bootstrap component / bootstrap4 / bootstrap5 / carouse in bootstrap / Guide / Process / Tutorial / What

Bootstrap: Component “Card”

by vikashdev kAugust 23, 2021August 25, 2021BootstrapLeave a Comment

Cards:

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:

Tagged : Bootstrap / bootstrap4 / card class in bootstrap / card columns in bootstrap / card deck in bootstrap / card footer in bootstap / card group in bootstrap / card image in top in bootstrap / card image overlay in bootstrap / card image use in bottom in bootstrpa / contextual class in bootstrap / grid in card bootstrap / Guide / image in card bootstrap / Perforce / Process / stretched link inside the card in bootstrap / Tutorial

Bootstrap: Component “Breadcrumb”

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

Breadcrumb navigation provides a link back to each previous page the user navigates through and shows the user’s current location on a website.

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.

Tagged : Bootstrap / bootstrap4 / breadcrumb in bootstrap / breadcrumb in css / breadcrumb in html / create breadcrumb navigation in html and css / Guide / Process / Tutorial