--- layout: default permalink: /alignments category: utilities title: Alignments description: "Align the elements of the containers easily by adding one of the alignment classes.

You can add any type of alignment to any of the components and it will be affected." ---

{{ page.title }} Utilities

{{ page.description }}


Use

* Add centered to the container to center its columns vertically and horizontally example:


Column
Column
{% highlight html %}
...
...
{% endhighlight %}

* Add between to the container to maintain a spacing between each column. example:


Column
Column
Column
{% highlight html %}
...
...
...
{% endhighlight %}

* Add align-start to the container to align its columns at the beginning of the container, example:


Column
Column
{% highlight html %}
...
...
{% endhighlight %}

* Add align-end to the container to line up its columns at the end of the container, example:


Column
Column
{% highlight html %}
...
...
{% endhighlight %}
Display

Simple classes to change the property display of the elements.

{% highlight html %}
..
..
..
{% endhighlight %}
{% highlight css %} .d-block{ display: block !important; } .d-flex{ display: flex !important; } .d-flex-grow{ flex-grow: 1 !important; } {% endhighlight %}