GitHub

Alignment

Alignment class can be used on row components to align columns in vertical or horizontial axises.

Import Path

Import following style(s) to include flex, alignment, visibility and gutter styles in your app.

  • Base: nord-ui/dist/flex.css
  • Dark Theme: none

Horizontial

Using justify-content, will align columns in horizontial direction. justify classes are:

  • .justify-start: same as justify-content: flex-start
  • .justify-end: same as justify-content: flex-end
  • .justify-center: same as justify-content: flex-center
  • .justify-space-between: same as justify-content: space-between
  • .justify-space-around: same as justify-content: space-around
  • .justify-space-evenly: same as justify-content: space-evenly

Example:

start
end
center
space-between
space-between
space-between
space-around
space-around
space-around
space-evenly
space-evenly
space-evenly
<div class="row justify-start">
    <div class="col xs-3">start</div>
</div>
<div class="row justify-end">
    <div class="col xs-3">end</div>
</div>
<div class="row justify-center">
    <div class="col xs-3">center</div>
</div>
<div class="row justify-space-between">
    <div class="col xs-3">space-between</div>
    <div class="col xs-3">space-between</div>
    <div class="col xs-3">space-between</div>
</div>
<div class="row justify-space-around">
    <div class="col xs-3">space-around</div>
    <div class="col xs-3">space-around</div>
    <div class="col xs-3">space-around</div>
</div>
<div class="row justify-space-evenly">
    <div class="col xs-3">space-evenly</div>
    <div class="col xs-3">space-evenly</div>
    <div class="col xs-3">space-evenly</div>
</div>

Vertical

Setting align-items property will align columns in vertical direction.

Align classes are:

  • .align-start: same as align-items: flex-start
  • .align-end: same as align-items: flex-end
  • .align-center: same as align-items: flex-center
  • .align-baseline: same as align-items: flex-baseline
end
end
end

center
center
center

start
start
start
<div class="row align-end">
    <div class="col xs-4">end</div>
    <div class="col xs-4">end</div>
    <div class="col xs-4">end</div>
</div>
<br>
<div class="row align-center">
    <div class="col xs-4">center</div>
    <div class="col xs-4">center</div>
    <div class="col xs-4">center</div>
</div>
<br>
<div class="row align-first">
    <div class="col xs-4">start</div>
    <div class="col xs-4">start</div>
    <div class="col xs-4">start</div>
</div>


Also, it is possible to set alignment of columns separately.

Self align classes:

  • .align-self-start: same as align-self: flex-start
  • .align-self-end: same as align-self: flex-end
  • .align-self-center: same as align-self: center
  • .align-self-baseline: same as align-self: baseline
center
end
end

start
center
center

end
start
start
<div class="row align-end">
    <div class="col xs-4 align-self-center">center</div>
    <div class="col xs-4">end</div>
    <div class="col xs-4">end</div>
</div>
<br>
<div class="row align-center">
    <div class="col xs-4 align-self-start">start</div>
    <div class="col xs-4">center</div>
    <div class="col xs-4">center</div>
</div>
<br>
<div class="row align-first">
    <div class="col xs-4 align-self-end">end</div>
    <div class="col xs-4">start</div>
    <div class="col xs-4">start</div>
</div>