doneit-web/src/style

System design

First solve the problem then write the code

Table of content

• Diplay
• Flex
• Enabling flexbox
• Flex direction
• Flex justify
• Flex align
• Flex align self
• Flex wrap
• Float
• Float direction



---





Diplay




Specify the elements display property. These classes can be applied using the following format d-{display}.

• d-inline-flex - sets the element display property to inline-flex
• d-flex - sets the element display property to flex
• d-inline-block - sets the element display property to inline-block
• d-block - sets the element display property to block
• d-inline - sets the element display property to inline
• d-none - sets the element display property to none

---





Flex




Control the layout of flex containers with alignment, justification and more with responsive flexbox utilities.

You can also customize flex utilities to apply based upon various breakpoints.





Enabling flexbox

• .d-flex
• .d-inline-flex




Flex direction



• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse




Flex-justify



• .justify-start
• .justify-end
• .justify-center
• .justify-space-between
• .justify-space-around




Flex align



• .align-start
• .align-end
• .align-center
• .align-baseline
• .align-stretch




Flex align self



• .align-start
• .align-end
• .align-center
• .align-baseline
• .align-stretch




Flex wrap



• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse

---





Float




Float utility classes.

You can also customize flex utilities to apply based upon





Float direction



• .float-left
• .float-right