-
BS Grid Basic
-
BS Typography
-
BS Tables
-
BS Images
-
BS Jumbotron
-
BS Alerts
-
BS Forms
-
BS Floating Labels
-
BS Form Validation
-
BS Buttons
-
BS Button Groups
-
BS Badges
-
BS Progress Bars
-
BS Spinnier
-
BS Pagination
-
BS List Groups
-
BS Cards
-
BS Dropdowns
-
BS Collapse
-
BS Navs
-
BS Navbar
-
BS Carousel
-
BS Modal
-
BS Tooltip
-
BS Panels
-
BS Popover
-
BS Toast
-
BS Scrollspy
-
BS OffCanvas
-
BS Utilities
-
BS Flex
Flex
Bootstrap Flex is a component of the Bootstrap framework that utilizes the CSS3 Flexible Box Layout, commonly known as Flexbox. It provides a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic. Flexbox in Bootstrap simplifies designing complex layouts and responsive structures without having to use float or positioning hacks.
Key Features of Bootstrap Flex:
- Responsive Layouts: Flex offers responsive utilities to adjust layouts for different screen sizes.
- Alignment and Justification: Easily align and justify content horizontally and vertically.
- Ordering and Nesting: Change the visual order of elements and nest flex containers for complex layouts.
- Control over Size: Flex items can grow or shrink to fit the container space.
Implementing Basic Flexbox in Bootstrap
Bootstrap Flex is applied through a set of CSS classes. These classes can be used to define a flex container and control the layout and alignment of its child elements (flex items).
Creating a Simple Flex Container
<div class=”d-flex”>
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<!– More flex items –>
</div>
Explanation:
- d-flex turns the div into a flex container.
- The direct children of this div become flex items, laid out horizontally by default.
Basic Vertical Flex Container
HTML Code:
html
Copy code
<div class=”d-flex flex-column”>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Explanation:
- Adding flex-column to d-flex changes the orientation of the flex container to vertical.
- Flex items are stacked vertically in this configuration.
Understanding Flex Direction
Changing Flex Direction
The direction of flex items within a container can be controlled using the flex-direction property. Bootstrap provides utility classes for this purpose.
Flex Classes | Explanation |
.flex-row, .flex-row-reverse | Sets horizontal direction of flex items, standard or reversed. |
.flex-column, .flex-column-reverse | Sets vertical direction of flex items, standard or reversed. |
Example 1: Row Direction
<div class=”d-flex flex-row”>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Explanation:
- flex-row aligns the flex items in a row (horizontal direction). This is the default behavior of a flex container.
Example 2: Column-Reverse Direction
<div class=”d-flex flex-column-reverse”>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Explanation:
– flex-column-reverse arranges the flex items in a vertical column but in reverse order (bottom to top).
Controlling Flex Wrap
Point: Managing Wrapping of Flex Items
Description: Flex wrap controls whether the flex items are forced into a single line or can be wrapped onto multiple lines if there’s not enough space in the flex container.
Example 1: Flex Wrap
<div class=”d-flex flex-wrap”>
<div class=”p-2″>Item 1</div>
<div class=”p-2″>Item 2</div>
<div class=”p-2″>Item 3</div>
<!– More items –>
</div>
Explanation:
– `flex-wrap` allows flex items to wrap onto multiple lines, instead of squeezing them into one line.
– This is useful when dealing with a large number of flex items or with items that need a minimum amount of space.
Example 2: Flex No Wrap
<div class=”d-flex flex-nowrap”>
<div class=”p-2″>Item 1</div>
<div class=”p-2″>Item 2</div>
<div class=”p-2″>Item 3</div>
<!– More items –>
</div>
Explanation:
– `flex-nowrap` forces all flex items to stay on one line, regardless of their size or the container size.
– This can lead to overflow but is useful when you need to align items in a single, unbroken line.
Aligning Items with Justify Content
Point: Horizontal Alignment of Flex Items
Description: The `justify-content` property is used to align flex items horizontally and distribute extra space within a flex container.
Example 1: Centering Items Horizontally
<div class=”d-flex justify-content-center”>
<div class=”p-2″>Centered item</div>
</div>
Explanation:
– `justify-content-center` aligns the flex items in the center of the container horizontally.
– This is commonly used for centering content or balancing space on both sides of flex items.
Example 2: Space Between Items
<div class=”d-flex justify-content-between”>
<div class=”p-2″>Item 1</div>
<div class=”p-2″>Item 2</div>
<div class=”p-2″>Item 3</div>
</div>
Explanation:
– `justify-content-between` places equal space between each flex item, aligning the first and last items against the container edges.
– Ideal for distributing items evenly within a container.
Controlling Flex Wrap
Point: Managing Wrapping of Flex Items
Description: Flex wrap controls whether the flex items are forced into a single line or can be wrapped onto multiple lines if there’s not enough space in the flex container.
Example 1: Flex Wrap
<div class=”d-flex flex-wrap”>
<div class=”p-2″>Item 1</div>
<div class=”p-2″>Item 2</div>
<div class=”p-2″>Item 3</div>
<!– More items –>
</div>
Explanation:
– `flex-wrap` allows flex items to wrap onto multiple lines, instead of squeezing them into one line.
– This is useful when dealing with a large number of flex items or with items that need a minimum amount of space.
Example 2: Flex No Wrap
<div class=”d-flex flex-nowrap”>
<div class=”p-2″>Item 1</div>
<div class=”p-2″>Item 2</div>
<div class=”p-2″>Item 3</div>
<!– More items –>
</div>
Explanation:
– `flex-nowrap` forces all flex items to stay on one line, regardless of their size or the container size.
– This can lead to overflow but is useful when you need to align items in a single, unbroken line.
Aligning Items with Justify Content
Point: Horizontal Alignment of Flex Items
Description: The `justify-content` property is used to align flex items horizontally and distribute extra space within a flex container.
Example 1: Centering Items Horizontally
<div class=”d-flex justify-content-center”>
<div class=”p-2″>Centered item</div>
</div>
Explanation:
– `justify-content-center` aligns the flex items in the center of the container horizontally.
– This is commonly used for centering content or balancing space on both sides of flex items.
Example 2: Space Between Items
<div class=”d-flex justify-content-between”>
<div class=”p-2″>Item 1</div>
<div class=”p-2″>Item 2</div>
<div class=”p-2″>Item 3</div>
</div>
Explanation:
– `justify-content-between` places equal space between each flex item, aligning the first and last items against the container edges.
– Ideal for distributing items evenly within a container.
Aligning Items with Align Items
Point: Vertical Alignment of Flex Items
Description: The `align-items` property is used to align flex items vertically within the container. It determines the alignment of items along the cross axis.
Example 1: Centering Items Vertically
<div class=”d-flex align-items-center” style=”height: 100px;”>
<div class=”p-2″>Vertically centered item</div>
</div>
Explanation:
– `align-items-center` vertically centers the flex items within the container.
– The `height` style on the container is necessary to see the effect of vertical alignment.
Example 2: Flex Items at Start
<div class=”d-flex align-items-start” style=”height: 100px;”>
<div class=”p-2″>Aligned to start</div>
</div>
Explanation:
– `align-items-start` aligns flex items to the start of the container (top for a column, left for a row).
– This is the default behavior for flex items if no alignment is specified.
Aligning Self within Flex Containers
Point: Individual Alignment of Flex Items
Description: The `align-self` property allows individual flex items to override the container’s `align-items` setting, giving them a unique vertical alignment.
Example 1: Single Item Centered
<div class=”d-flex align-items-center” style=”height: 100px;”>
<div class=”p-2″>Regular item</div>
<div class=”p-2 align-self-end”>Aligned to end</div>
</div>
Explanation:
– `align-self-end` places the specific item at the end of the container vertically, regardless of the container’s overall alignment.
Ordering Flex Items
Point: Changing the Order of Flex Items
Description: Flexbox allows reordering of flex items without changing the HTML structure using the `order` property.
Example 1: Reordering Items
YouTube Reference :
1) Introduction to Bootstrap in Hindi/Urdu
