Skip to main content

BOOTSTRAP FLOAT

 Use Bootstrap float utilities to toggle the element to left or right, or disable floating. To toggle an element to the right with .float-end class and left with .float-start class.

Example

All viewport sizes,
  • .float-start (Float content to left)
  • .float-end (Float content to right)
  • .float-none (Don't float content)

Note: Float utilities do not work on flex items

Responsive Float Start

Float an element to the left depending on your screen size with the responsive float start classes.

  • .float-sm-start - Float content to the left on small screens (SM) or wider 
  • .float-md-start - Float content to the left on medium screens (MD) or wider
  • .float-lg-start - Float content to the left on large screens (LG) or wider
  • .float-xl-start - Float content to the left on extra-large screens (XL) or wider
  • .float-xxl-start - Float content to the left on XXL screens or wider

Responsive Float End

Float an element to the right depending on your screen size with the responsive float end classes.

  • .float-sm-end - Float content to the right on small screens (SM) or wider 
  • .float-md-end - Float content to the right on medium screens (MD) or wider
  • .float-lg-end - Float content to the right on large screens (LG) or wider
  • .float-xl-end - Float content to the right on extra-large screens (XL) or wider
  • .float-xxl-end - Float content to the right on XXL screens or wider
Responsive float-none classes are,
  • .float-sm-none
  • .float-md-none
  • .float-lg-none
  • .float-xl-none
  • .float-xxl-none

Comments

Popular posts from this blog

BOOTSTRAP OPACITY

With Bootstrap Opacity, you can control the opacity level of an element.  Predefined Bootstrap Opacity values are, 100% (opacity-100) 75% (opacity-75) 50% (opacity-50) 25% (opacity-25) 0 (opacity-0) - Completely transparent The Opacity is used to adjust the transparency level (visibility) of an element. Let's look into an example, See the Pen Bootstrap Opacity by Prime Study Hub ( @PrimeStudyHub ) on CodePen .

BOOTSTRAP RANGE

Bootstrap Range helps to customize the range inputs with built-in customization for better look and cross-browser supports. Use .form-range controls to make fancy range inputs Min - minimum value Max - maximum value Step - interval value Value - Precise value Min and Max The range function specifies the default minimum and maximum values are 0 ( min ) and 100 ( max ), respectively. To adjust the range, set min and max properties value based on your requirements. Let's look into an example, <label class="form-label">Bootstrap Range (Min and Max)</label> <input type="range" class="form-range" min="0" max="4" id="MinMaxRange1"> See the Pen Bootstrap Range (Min) by Prime Study Hub ( @PrimeStudyHub ) on CodePen . Step The step attribute allows us to adjust the interval values of range input element. The value of step attribute can be "any" or a positive floating-point number. The defaul...