Bootstrap class: .justify-content-*-start
<div class="d-flex justify-content-start">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex justify-content-sm-start">...</div>
<div class="d-flex justify-content-md-start">...</div>
<div class="d-flex justify-content-lg-start">...</div>
<div class="d-flex justify-content-xl-start">...</div>Preview
Flex item 1
Flex item 2
Flex item 3
Use Shuffle AI to build your own Bootstrap templates
Quickly design stunning Bootstrap templates with the power of Shuffle AI — no coding required.
Check .justify-content-*-start in a real project
Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.
Tips 💡
You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.
More in Bootstrap Flexbox
- flex-*-nowrap
- flex-*-column
- flex-*-row
- flex-*-row-reverse
- flex-*-column-reverse
- flex-*-wrap-reverse
- flex-*-grow-1
- flex-*-grow-0
- flex-*-shrink-1
- flex-*-shrink-0
- flex-*-wrap
- flex-fill
- justify-content-*-end
- justify-content-*-between
- justify-content-*-center
- align-content-*-end
- align-content-*-start
- justify-content-*-around
- align-content-*-around
- align-content-*-stretch
- align-items-*-end
- align-items-*-start
- align-items-*-baseline
- align-content-*-center
- align-items-*-center
- align-items-*-stretch
- align-self-*-center
- align-self-*-baseline
- align-self-*-start
- align-self-*-stretch
- order-*-#
- align-self-*-end
- flex-xxl-column
- flex-xxl-column-reverse
- flex-lg-fill
- flex-md-fill
- flex-sm-fill
- flex-xl-fill
- flex-xxl-fill
- flex-xxl-grow-0
- flex-xxl-grow-1
- flex-xxl-nowrap
- flex-xxl-row
- flex-xxl-row-reverse
- flex-xxl-shrink-0
- flex-xxl-shrink-1
- flex-xxl-wrap
- flex-xxl-wrap-reverse
- justify-content-around
- justify-content-between
- justify-content-center
- justify-content-end
- justify-content-evenly
- justify-content-lg-around
- justify-content-lg-between
- justify-content-lg-center
- justify-content-lg-end
- justify-content-lg-evenly
- justify-content-lg-start
- justify-content-md-around
- justify-content-md-between
- justify-content-md-center
- justify-content-md-end
- justify-content-md-evenly
- justify-content-md-start
- justify-content-sm-around
- justify-content-sm-between
- justify-content-sm-center
- justify-content-sm-end
- justify-content-sm-evenly
- justify-content-sm-start
- justify-content-start
- justify-content-xl-around
- justify-content-xl-between
- justify-content-xl-center
- justify-content-xl-end
- justify-content-xl-evenly
- justify-content-xl-start
- justify-content-xxl-around
- justify-content-xxl-between
- justify-content-xxl-center
- justify-content-xxl-end
- justify-content-xxl-evenly
- justify-content-xxl-start
- order-0
- order-1
- order-first
- order-last
- order-lg-first
- order-lg-last
- order-lg-0
- order-md-0
- order-md-first
- order-md-last
- order-sm-0
- order-sm-first
- order-sm-last
- order-xl-0
- order-xl-first
- order-xl-last
- order-xxl-0
- order-xxl-first
- order-xxl-last
