Posts

Showing posts with the label Bootstrap Utilities

Bootstrap Borders Example

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element. Border Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time. Additive < span class = " border " > </ span > < span class = " border-top " > </ span > < span class = " border-end " > </ span > < span class = " border-bottom " > </ span > < span class = " border-start " > </ span > Subtractive < span class = " border-0 " > </ span > < span class = " border-top-0 " > </ span > < span class = " border-end-0 " > </ span > < span class = " border-bottom-0 " > </ span > < span class = " border-start-0 " > </ span > Border color Change the border color using utilities...

Bootstrap Colors: Map Example

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too. Colors Colorize text with color utilities. If you want to colorize links, you can use the .link-* helper classes which have :hover and :focus states. < p class = " text-primary " > .text-primary </ p > < p class = " text-secondary " > .text-secondary </ p > < p class = " text-success " > .text-success </ p > < p class = " text-danger " > .text-danger </ p > < p class = " text-warning bg-dark " > .text-warning </ p > < p class = " text-info bg-dark " > .text-info </ p > < p class = " text-light bg-dark " > .text-light </ p > < p class = " text-dark " > .text-dark </ p > < p class = " text-body " > .text-body </ p > < p class = ...

Bootstrap Shadows: Examples Example

Add or remove shadows to elements with box-shadow utilities. Examples While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows , you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match). < div class = " shadow-none p-3 mb-5 bg-light rounded " > No shadow </ div > < div class = " shadow-sm p-3 mb-5 bg-body rounded " > Small shadow </ div > < div class = " shadow p-3 mb-5 bg-body rounded " > Regular shadow </ div > < div class = " shadow-lg p-3 mb-5 bg-body rounded " > Larger shadow </ div > Sass Variables $box-shadow : 0 .5rem 1rem rgba ( $black , .15 ) ; $box-shadow-sm : 0 .125rem .25rem rgba ( $black , .075 ) ; $box-shadow-lg : 0 1rem 3rem rgba ( $black ,...