Tag: bootstrap4

Bootstrap utilities : “Vertical align”

by vikashdev kBootstrap

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 exampleDownload
Tagged : / / / / / / / / / / / / / / / / /

Bootstrap:-Component “Progress”

by vikashdev kBootstrap

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 exampleDownload
Tagged : / / / / / / / / / / /

Bootstrap:-Component “Navigation bar”

by vikashdev kBootstrap

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 examplesDownload
Tagged : / / / / / / / / / / / / /

Bootstrap:-Component “List group”

by vikashdev kBootstrap

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

Bootstrap:-Component “Dropdowns”

by vikashdev kBootstrap

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:-Component “Collapse”

by vikashdev kBootstrap

 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: Component “Card”

by vikashdev kBootstrap

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: Component “Breadcrumb”

by vikashdev kBootstrap

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