BootstrapBootstrap

Bootstrap Lessons – 4 | How is the alignment done?

With the support of Teknotower , we continue with the 4th part of our Bootstrap lessons series. Before starting this lesson, I recommend that you read our introductory lesson .

This course includes:

  1. What is Flex?
  2. How is row-column alignment done?
  3. What is the Order class?
  4. What is the Offset class?
  5. How to align text?
  6. How is coloring done?

What is Flex?

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
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-start to lean left
  • > justify-content-end
  • –> justify-content-between
  • –> justify-content-around values are given to leave space around and between them according to width.
bootstrap horizontal alignment
The code for the image is as follows.
    <h2>Alignment</h2>
    <hr>
  <div class="container-1">
  <hr>

<p class="font-weight-bold">EXAMPLES</p>

<p>Alignment in Horizontality</p>
 <hr>
         --------- Example 1
         <div class="d-flex justify-content-start ">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>
         <br><br><hr>
         --------- Example 2

<div class="d-flex justify-content-end ">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>
         <br><br><hr>
         --------- Example 3

<div class="d-flex justify-content-center">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>
         <br><br> <hr>
         --------- Example 4

<div class="d-flex justify-content-between ">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>
         <br><br><hr>
         --------- Example 5

<div class="d-flex justify-content-around">
           <div class="col-example">col</div>
           <div class="col-example">col</div>
           <div class="col-example">col</div>
         </div>
  • Positioning columns vertically:

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-center to 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.
           <div class="d-flex align-items-start">
                <div class="p-2 bd-highlight">col</div>
                <div class="p-2 bd-highlight">col</div>
                <div class="p-2 bd-highlight">col</div>
              </div>
           <div class="d-flex align-items-end">
                <div class="p-2 bd-highlight">col1</div>
                <div class="p-2 bd-highlight">col1</div>
                <div class="p-2 bd-highlight">col1</div>
              </div>
           <div class="d-flex align-items-center">
                <div class="col-example">col</div>
                <div class="col-example">col</div>
                <div class="col-example">col</div>
              </div>
           <div class="d-flex align-items-baseline">
                <div class="col-example">col</div>
                <div class="col-example">col</div>
                <div class="col-example">col</div>
              </div>
           <div class="d-flex align-items-stretch">
                <div class="col-example">col</div>
                <div class="col-example">col</div>
                <div class="col-example">col</div>
              </div></div>

What is the Order class?

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>
before the order class
after order class

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 the left 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>
bootstrap text positioning

How is Coloring Done?

Classes to use for coloring:
  1. muted
  2. Primary
  3. success
  4. Info
  5. warning
  6. Danger
  7. secondary
  8. Dark
  9. body
  10. The colors that will be formed when we use the light classes are as follows.
bootstrap coloring classes The code for the image above is:
  <h2>Coloring</h2>
  <a href="#" class="text-muted"> class="text-muted </a> <br><br>
  <a href="#" class="text-primary"> class="text-primary </a><br><br>
  <a href="#" class="text-success"> class="text-success </a><br><br>
  <a href="#" class="text-info"> class="text-info </a><br><br>
  <a href="#" class="text-warning"> class="text-warning </a><br><br>
  <a href="#" class="text-danger"> class="text-danger </a><br><br>
  <a href="#" class="text-secondary"> class="text-secondary </a><br><br>
  <a href="#" class="text-dark"> class="text-dark </a><br><br>
  <a href="#" class="text-body"> class="text-body </a><br><br>
  <a href="#" class="text-light"> class="text-light </a><br><br>

Background Coloring:

Classes used for background coloring:
  1. bg-primary text-white
  2. bg-success text-white
  3. bg-info text-white
  4. bg-warning text-white
  5. bg-danger text-white
  6. bg-secondary text-white
  7. bg-dark text-white
  8. bg-light text-dark classes are used.
So how will the color image and code that will be formed when we use it be?
bootstrap background coloring 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…

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button