scmgalaxy tutorials bootstrap 4 utilities Archives - scmGalaxy https://www.scmgalaxy.com/tutorials/tag/scmgalaxy-tutorials-bootstrap-4-utilities/ A Platform for Software Engineers Sat, 25 Sep 2021 12:41:37 +0000 en-US hourly 1 https://wordpress.org/?v=7.1 Bootstrap Utilities : “Visibility” https://www.scmgalaxy.com/tutorials/bootstrap-utilities-visibility/ https://www.scmgalaxy.com/tutorials/bootstrap-utilities-visibility/#respond Sat, 25 Sep 2021 12:41:35 +0000 https://www.scmgalaxy.com/tutorials/?p=9224 With visibility utilities you have control the visibility, without modifying the display, of elements.

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

]]> With visibility utilities you have control the visibility, without modifying the display, of elements.

Visibility simple exampleDownload

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

]]> https://www.scmgalaxy.com/tutorials/bootstrap-utilities-visibility/feed/ 0 Bootstrap utilities : “Vertical align” https://www.scmgalaxy.com/tutorials/bootstrap-utilities-vertical-align/ https://www.scmgalaxy.com/tutorials/bootstrap-utilities-vertical-align/#respond Sat, 25 Sep 2021 12:09:09 +0000 https://www.scmgalaxy.com/tutorials/?p=9220 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. […]

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

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

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

]]> https://www.scmgalaxy.com/tutorials/bootstrap-utilities-vertical-align/feed/ 0 Bootstrap Utilities : Text https://www.scmgalaxy.com/tutorials/bootstrap-utilities-text/ https://www.scmgalaxy.com/tutorials/bootstrap-utilities-text/#respond Fri, 24 Sep 2021 12:43:35 +0000 https://www.scmgalaxy.com/tutorials/?p=9194 Text Utilities classes, contains various text properties, such as, text alignment, text wrapping, text overflow, text transformation, font weight, italics, monospace, […]

The post Bootstrap Utilities : Text appeared first on scmGalaxy.

]]> Text Utilities classes, contains various text properties, such as, text alignment, text wrapping, text overflow, text transformation, font weight, italics, monospace, resetting color of text, removing text decorations.

1. Text alignment :

  • .class text-justify
  • .class text-left
  • .class text-center
  • .class text-right
  • .class text-sm|md|lg|xl-left

2. Text wrapping and overflow :

  • .class text-wrap
  • .class text-nowrap
  • .class text-truncate

3. Word break :

  • .class text-break

4. Text transform :

  • .class text-lowercase
  • .class text-uppercase
  • .class text-capitalize

5. Font weight and italics :

  • .class font-weight-bold
  • .class font-weight-bolder
  • .class font-weight-normal
  • .class font-weight-light
  • .class font-weight-lighter
  • .class font-italic

6. Monospace :

  • .class text-monospace

7. Reset color :

  • .class text-muted

8. Text decoration

  • .class text-decoration-none

The post Bootstrap Utilities : Text appeared first on scmGalaxy.

]]> https://www.scmgalaxy.com/tutorials/bootstrap-utilities-text/feed/ 0 Bootstrap Utilities : Spacing https://www.scmgalaxy.com/tutorials/bootstrap-utilities-spacing/ https://www.scmgalaxy.com/tutorials/bootstrap-utilities-spacing/#respond Fri, 24 Sep 2021 11:40:59 +0000 https://www.scmgalaxy.com/tutorials/?p=9189 Spacing helpers are useful for modifying the padding and margin of an element. Where property is one of: m–sets margin p-sets padding Sides is one of:- t-sets margin-padding “top“ b-sets […]

The post Bootstrap Utilities : Spacing appeared first on scmGalaxy.

]]> Spacing helpers are useful for modifying the padding and margin of an element.

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
Spacing simple exampleDownload

The post Bootstrap Utilities : Spacing appeared first on scmGalaxy.

]]> https://www.scmgalaxy.com/tutorials/bootstrap-utilities-spacing/feed/ 0 Bootstrap Utilities : “Screenreaders” https://www.scmgalaxy.com/tutorials/bootstrap-utilities-screenreaders/ https://www.scmgalaxy.com/tutorials/bootstrap-utilities-screenreaders/#respond Wed, 22 Sep 2021 12:31:21 +0000 https://www.scmgalaxy.com/tutorials/?p=9135 .sr-only class is used to hide an element in all device except screenreader.

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

]]> .sr-only class is used to hide an element in all device except screenreader.

Screenreader simple example but effect Download

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

]]> https://www.scmgalaxy.com/tutorials/bootstrap-utilities-screenreaders/feed/ 0 Bootstrap Utilities : “Shadows” https://www.scmgalaxy.com/tutorials/bootstrap-utilities-shadows/ https://www.scmgalaxy.com/tutorials/bootstrap-utilities-shadows/#respond Wed, 22 Sep 2021 12:05:52 +0000 https://www.scmgalaxy.com/tutorials/?p=9130 box-shadow utilities class is use to add or remove shadows in the elements.

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

]]> box-shadow utilities class is use to add or remove shadows in the elements.

<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
Shadow in the text simple example.Download

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

]]> https://www.scmgalaxy.com/tutorials/bootstrap-utilities-shadows/feed/ 0 Bootstrap: Utilities “Flex” https://www.scmgalaxy.com/tutorials/bootstrap-utilities-flex/ https://www.scmgalaxy.com/tutorials/bootstrap-utilities-flex/#respond Sat, 11 Sep 2021 09:15:00 +0000 https://www.scmgalaxy.com/tutorials/?p=8952 Bootstrap utilities Flex utility can be used to manage the layout, alignment, grid columns, navigation, and other components of the page. […]

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

]]> Bootstrap utilities Flex utility can be used to manage the layout, alignment, grid columns, navigation, and other components of the page.

All flex classes come with additional responsive classes, which makes it easy to set a specific flex class on specific screen size.

The * the symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.

Class Description
.d-*-flexCreates a flexbox container for different screens
.d-*-inline-flexCreates an inline flexbox container for different screens
.flex-*-rowDisplay flex items horizontally on different screens
.flex-*-row-reverseDisplay flex items horizontally, and right-aligned, on different screens
.flex-*-columnDisplay flex items vertically on different screens
.flex-*-column-reverseDisplay flex items vertically, with reversed order, on different screens screens
.justify-content-*-startDisplay flex items from the start (left-aligned) on different screens
.justify-content-*-endDisplay flex items at the end (right-aligned) on different screens
.justify-content-*-centerDisplay flex items in the center of a flex container on different screens
.justify-content-*-betweenDisplay flex items in “between” on different screens
.justify-content-*-aroundDisplay flex items “around” on different screens
.flex-*-fillForce flex items into equal widths on different screens
.flex-*-grow-0Don’t make the items grow on different screens
.flex-*-grow-1Make items grow on different screens
.flex-*-shrink-0Don’t make the items shrink on different screens
.flex-*-shrink-1Make items shrink on different screens
.order-*-0-12Change the order from 0 to 12 on small screens
.flex-*-nowrapDon’t wrap items on different screens
.flex-*-wrapWrap items on different screens
.flex-*-wrap-reverseReverse the wrapping of items on different screens
.align-content-*-startAlign gathered items from the start on different screens
.align-content-*-endAlign gathered items at the end on different screens
.align-content-*-centerAlign gathered items in the center on different screens
.align-content-*-aroundAlign gathered items “around” on different screens
.align-content-*-stretchStretch gathered items on different screens
.align-items-*-startAlign single rows of items from the start on different screens
.align-items-*-endAlign single rows of items at the end on different screens
.align-items-*-centerAlign single rows of items in the center on different screens
.align-items-*-baselineAlign single rows of items on the baseline on different screens
.align-items-*-stretchStretch single rows of items on different screens
.align-self-*-startAlign a flex item from the start on different screens
.align-self-*-endAlign a flex item at the end on different screens
.align-self-*-centerAlign a flex item in the center on different screens
.align-self-*-baselineAlign a flex item on the baseline on different screens
.align-self-*-stretchStretch a flex item on different screens
Bootstrap Flex exampleDownload

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

]]> https://www.scmgalaxy.com/tutorials/bootstrap-utilities-flex/feed/ 0 Bootstrap: Utilities “Embed” https://www.scmgalaxy.com/tutorials/bootstrap-utilities-embed/ https://www.scmgalaxy.com/tutorials/bootstrap-utilities-embed/#respond Sat, 11 Sep 2021 07:41:01 +0000 https://www.scmgalaxy.com/tutorials/?p=8946 Bootstrap embeds is a utility that helps you insert video or slideshow in the page keeping width of the parent and scales on any device.

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

]]> Bootstrap embeds is a utility that helps you insert video or slideshow in the page keeping width of the parent and scales on any device.

Bootstrap embeds simple example Download

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

]]> https://www.scmgalaxy.com/tutorials/bootstrap-utilities-embed/feed/ 0 Bootstrap: Utilities “Display” https://www.scmgalaxy.com/tutorials/bootstrap-utilities-display/ https://www.scmgalaxy.com/tutorials/bootstrap-utilities-display/#respond Sat, 11 Sep 2021 06:40:54 +0000 https://www.scmgalaxy.com/tutorials/?p=8942 Bootstrap utility display changes the value of the property with our responsive display utility classes. We purposely support only a subset […]

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

]]> Bootstrap utility display changes the value of the property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.

Screen SizeClass
Hidden an element.d-none
Hides an element on a specific screen size.d-*-none
Hidden only on xs.d-none .d-sm-block
Hidden only on sm.d-sm-none .d-md-block
Hidden only on md.d-md-none .d-lg-block
Hidden only on lg.d-lg-none .d-xl-block
An element inline.d-inline
An element inline on a specific screen size.d-*-inline
An element inline-block.d-inline-block
An element inline-block on a specific screen size.d-*-inline-block
An Element display as a table.d-table
An element display as a table on a specific screen size.d-*-table
An element display as a table cell.d-table-cell
An element display as a table cell on a specific screen size.d-*-table-cell
An element display as a table row.d-table-row
An element display as a table row on a specific screen size.d-*-table-row
Creates a flexbox container and transforms direct children into flex items.d-flex
Creates a flexbox container on a specific screen size.d-*-flex
Creates an inline flexbox container.d-inline-flex
Creates an inline flexbox container on a specific screen size.d-*-inline-flex

Syntax:-

<div class="container mt-4">
  <h2>Display Inline Block</h2>
  <p>Use the d-inline-block class.</p>
  <div class="d-inline-block">Inline block DIV.</div>
  <div class="d-inline-block">Inline block DIV.</div>
</div>
Display utilities in bootstrap exampleDownload

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

]]> https://www.scmgalaxy.com/tutorials/bootstrap-utilities-display/feed/ 0 Bootstrap: Utilities “Borders” https://www.scmgalaxy.com/tutorials/bootstrap-utilities-borders/ https://www.scmgalaxy.com/tutorials/bootstrap-utilities-borders/#respond Tue, 07 Sep 2021 12:14:53 +0000 https://www.scmgalaxy.com/tutorials/?p=8834 Bootstrap 4 has a lot of utility classes to quickly style elements. With no using CSS code. Borders:- This class […]

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

]]> Bootstrap 4 has a lot of utility classes to quickly style elements. With no using CSS code.

Borders:-

This class adds a border all around the element.

  • Borders by using the border classes to add or remove borders from an elements.
  • Border Color by using border border-colorname to and color to the borders.
  • Border Radius by using rounded classes to rounded the corners.
Example of borders UtilitiesDownload

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

]]> https://www.scmgalaxy.com/tutorials/bootstrap-utilities-borders/feed/ 0