Flex, known as Flexible Box Layout, is a structure derived from the familiar CSS3 modules. It positions the boxes we will place independently of the existing objects around them. Previous Flex modules;
display:box : Standardized in 2009 and is currently obsolete. Only a few browsers on mobile support it.
display:flexbox : Defined in 2011. A hybrid solution. Currently obsolete. Only IE 10 supports it.
display:flex : The definition that was standardized in March 2014 and is now in use. All of the new generation browsers support it.
In our lesson, we will use Flex in the "d-flex" format, which we will use in most of our CSS classes. This can be thought of as a shortened form of display-flex.Flex flexible box Bootstrap 4
How is row-column alignment done?
We can carry out the positioning process in two ways. These are: horizontal and vertical positioning.
Positioning columns horizontally:
We will use the *justify-content-* class. Different results can be obtained with small additions to the grid structure. For example, while our column width should be 12 in total, we will use 9 and use the empty 3 space as a space to better understand the image. According to this empty space we can align for our columns. For this, div e divs where row is located;
to average –>justify-content-center
–> justify-content-startto lean left
––> justify-content-end
–>justify-content-between
–>justify-content-around values are given to leave space around and between them according to width.
We will use the *align-items– or align-self-* classes. In Bootstrap 4, vertical alignment can be done in 2 ways. Method 1 positions all the columns that are nested inside the row vertically at their upper-middle or bottom values. In the following example, the dive columns where row is located are vertically;
–> align-items-start to position it on top
–> align-items-center
–> align-items-end values are given to position them at the bottom.
Method 2 is to change the vertical alignment of a single column. Therefore; vertically to the desired column;
–> align-self-start to position it on top
–> align-self-centerto position in the middle
it is sufficient to write the –> align-self-end values after the col value to position them at the bottom.
The use of classes to be implemented vertically is as seen in the following code.
Order is the sorting class. Provides help changing an existing order. For example; Let our current ranking be col-1, col-2, col-3 and col-4 . Here, we can attribute our col classes as order-1, order-2, order-3 and order-4 as we wish. If we make it to Col-1, order-3, Col-2, order-1, Col-3, order-4 , Col-4, order-2, the order is col-1, col-2, col-3 and col-4; It will be col-2, col-4, col-1 and col-3.
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">1st post </div>
<div class="order-2 p-2 bd-highlight">2nd post </div>
<div class="order-1 p-2 bd-highlight">3rd post </div>
</div>
What is the Offset class?
Positioning with gaps around the columns–> *offset-md-* Offset ensures that spaces of the desired width are left on the left side of the column. For example, it is used as "col-md-6 offset-md-3" . Given the To property creates a column 6 units wide with 3 units of space on theleft side .
How to align text?
It is also possible to position the texts we have written in the box according to the box edges. But how? Let's see! The text alignment classes and their intended use are as follows:
text-left: Left-justified text.
text-center: Centered text.
text-right: Right-justified text.
text-justify: Text aligned by line length.
text-nowrap: The text that has filled the line. If we look at the code and the screen output:
<p class="text-left"> Left-based text .</p>
<p class="text-center"> Centered text .</p>
<p class="text-right"> Right-justified text .</p>
<p class="text-justify">Text by line length. </p>
<p class="text-nowrap"> Text that has filled the line .</p>
How is Coloring Done?
Classes to use for coloring:
muted
Primary
success
Info
warning
Danger
secondary
Dark
body
The colors that will be formed when we use the light classes are as follows.
So how will the color image and code that will be formed when we use it be?
If we see the code;
<div class="container">
<h2>Background Coloring</h2>
<p class="bg-primary text-white"> This class="bg-primary text-white </p>
<p class="bg-success text-white" > This class="bg-success text-white </p>
<p class="bg-info text-white"> Bu class="bg-info text-white </p>
<p class="bg-warning text-white"> Bu class="bg-warning text-white </p>
<p class="bg-danger text-white"> Bu class="bg-danger text-white </p>
<p class="bg-secondary text-white">Bu class="bg-secondary text-white </p>
<p class="bg-dark text-white"> Bu class="bg-dark text-white </p>
<p class="bg-light text-dark"> Bu class="bg-light text-dark </p>
</div>
Customary
Before I finish the course, I want to touch on a small topic: In order to breed elephants in India, elephants used to tie their feet to a stake with a chain when they were little. These little elephants tried very hard to remove the chains, injuring themselves. But their power is not enough to pull those chains out. They always try to pull it out with their full force. Elephants are animals with practical intelligence. Despite this, the elephants, whose efforts have failed, get used to the chain after a while. They begin to make no effort to remove it again. They understood that the outcome would not change. Time passes. Elephants become huge. Even though they have the power to remove that chain, they never try to take that chain out again. They got used to it because they tried a lot when they were little and got the same result. They now believe that they cannot be free, that they are restricted. What is no longer broken is not the chain on the feet of elephants, but their own minds.
This is called "Learned Helplessness" in psychology.
We all have established chains in our minds about learning, let's break them off.
Definitely follow our Instagram page to stay up to date with Bootstrap courses and sweepstakes.
In this article, we have discussed the issue of alignment in Bootstrap with you. In our next article; with rendering, borders, and more…
The code for the image above is:
If we see the code;
