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

Post a Comment

Popular posts from this blog

BOOTSTRAP SHADOWS

 Bootstrap provides the box-shadow utilities class, which can be used to add or remove shadows to elements. This is very much useful to make the elements standout. No Shadow ( .shadow-none ) Small Shadow ( .shadow-sm ) Regular Shadow ( .shadow ) Larger Shadow ( .shadow-lg ) Examples The shadows on component are disabled by default, and this can be enabled via $enable-shadows . See the Pen Bootstrap Shadows by Prime Study Hub ( @PrimeStudyHub ) on CodePen .
Post a Comment
Read more

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...
Post a Comment
Read more

BOOTSTRAP OVERFLOW

Bootstrap overflow utilities controls the content flow when it reaches the area of an element. It has four default values and classes, but these classes are not responsive by default. overflow-auto - It adds scrollbars automatically when content exceeds its size overflow-hidden - overflow content will be hidden overflow-visible - overflow content will be visible without scrollbars overflow-scroll - overflow content is clipped with scrollbars on both horizontal and vertical See the Pen Bootstrap Overflow by Prime Study Hub ( @PrimeStudyHub ) on CodePen .
Post a Comment
Read more