GC Design SystemCSS Shortcuts
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Justify content

The justify content class sets the justify-content property. It controls how extra space is distributed between items in a flex or grid container along the main axis. In flexbox, the flex-direction property sets the main and cross axis. The effects of justify-content change based on the container's direction. Overview
CSS Shortcut class Applied style 
justify-content-around
 
justify-content: space-around;
 
justify-content-between
 
justify-content: space-between;
 
justify-content-evenly
 
justify-content: space-evenly;
 
justify-content-center
 
justify-content: center;
 
justify-content-start
 
justify-content: flex-start;
 
justify-content-end
 
justify-content: flex-end;

Examples

Around
justify-content-around

Columns are evenly spaced along the main axis with equal space around each line. This results in half-sized gaps at the start and end of the container. In row layouts, spacing is horizontal with half gaps on left and right.
In column layouts, spacing is vertical with half gaps on top and bottom.

1

2

3

<div class="d-flex justify-content-around">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Between
justify-content-between

Columns are evenly space along the main axis with equal space between each line. There’s no space at the start or end of the container. In row layouts, spacing is horizontal between items only.
In column layouts, spacing is vertical between items only.

1

2

3

<div class="d-flex justify-content-between">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Evenly
justify-content-evenly

Columns are evenly spaced along the main axis with equal space between all lines and the container edges, including the start and end. In row layouts, spacing is equal horizontally between and around items.
In column layouts, spacing is equal vertically between and around items.

1

2

3

<div class="d-flex justify-content-evenly">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Centre
justify-content-center

Rows are grouped together and centred along the main axis within the container, with equal space above and below the entire group. In row layouts, items are centred horizontally.
In column layouts, items are centred vertically.

1

2

3

<div class="d-flex justify-content-center">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Start
justify-content-start

Columns are grouped together at the start of the main axis within the container, leaving any extra space at the end of the container. In row layouts, items align to the left.
In column layouts, items align to the top.

1

2

3

<div class="d-flex justify-content-start">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

End
justify-content-end

Columns are grouped together at the end of the main axis within the container, leaving any extra space at the beginning of the container. In row layouts, items align to the right.
In column layouts, items align to the bottom.

1

2

3

<div class="d-flex justify-content-end">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:
  • xs: > 480px
  • sm: > 640px
  • md: > 768px
  • lg: > 1024px
  • xl: > 1280px
<div class="xs:justify-content-center ...">
  ...
</div>
Learn more about the responsive layout prefix. 2025-10-01