Learn the art of perfectly aligning text in bootstrap 5

Question

Learn the art of perfectly aligning text in bootstrap 5

I am looking to align text in the same way shown in this image from Libre Office.

Libra Office: https://i.sstatic.net/1dvVx.png

This is how the webpage appears: https://i.sstatic.net/JnFSP.png

Is there a way to make the webpage resemble the formatting in Libre Office?

Currently, I am utilizing Bootstrap 5:

.about {
  text-align: right;
  word-wrap: break-word;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464110a140a14094641504516">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
</head>
<div class="container" data-aos="fade-up">
  <div class="about text-justify">
    <header class="section-header">
      <h3>About Nadi Astrology</h3>
      <p>
        These days we hear about people with powers of extra sensory perceptions. (ESP). The Rishies were Holy Sages who occupied themselves in concentrating on the one Divine Being Paramathma. They far exceeded the powers of the E.S.P. People. More than that
        are able to know the future by their foresight. With this foresight, Rishies like Kousiha, Agasthiya, Vashishta, Mahasiva Vakkiyar have given predictions for the human being occupying this world. Let us take for instance any particular moment
        of a day. Many lives are born in the world at at any given moment. Human lives, plant life and animals. The Rishies have ignored the last to and confines their predictions only to human our of their wisdom envisaged will come forward to study
        these predictions. The exact age in which watch such person will come for the study has also been foretold by the Rishies.
      </p>
      <p></p>
    </header>
  </div>
</div>

</html>

html css bootstrap-5

Answer 1

Answer №1

It's as easy as this:

.about p {
  margin: 0;
  text-indent: 2rem;
  text-align: justify;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0f140a0a140a17585f4e5b08">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" data-aos="fade-up">
  <div class="about text-justify">
    <header class="section-header">
      <p>These days we hear about people with powers of extra sensory perceptions.  (ESP).  The Rishies were Holy Sages who occupied themselves in concentrating on the one Divine Being Paramathma.  They far exceeded the powers of the E.S.P. People.  More than that are able to know the future by their foresight.  With this foresight, Rishies like Kousiha, Agasthiya, Vashishta, Mahasiva Vakkiyar have given predictions for the human being occupying this world.  Let us take for instance any particular moment of a day.  Many lives are born in the world at at any given moment.  Human lives, plant life and animals.  The Rishies have ignored the last to and confines their predictions only to human our of their wisdom envisaged will come forward to study these predictions. The exact age in which watch such person will come for the study has also been foretold by the Rishies.</p>
      <p>These days we hear about people with powers of extra sensory perceptions.  (ESP).  The Rishies were Holy Sages who occupied themselves in concentrating on the one Divine Being Paramathma.  They far exceeded the powers of the E.S.P. People.</p>
    </header>
  </div>
</div>

Answer 2

It's as easy as this:

.about p {
  margin: 0;
  text-indent: 2rem;
  text-align: justify;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0f140a0a140a17585f4e5b08">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" data-aos="fade-up">
  <div class="about text-justify">
    <header class="section-header">
      <p>These days we hear about people with powers of extra sensory perceptions.  (ESP).  The Rishies were Holy Sages who occupied themselves in concentrating on the one Divine Being Paramathma.  They far exceeded the powers of the E.S.P. People.  More than that are able to know the future by their foresight.  With this foresight, Rishies like Kousiha, Agasthiya, Vashishta, Mahasiva Vakkiyar have given predictions for the human being occupying this world.  Let us take for instance any particular moment of a day.  Many lives are born in the world at at any given moment.  Human lives, plant life and animals.  The Rishies have ignored the last to and confines their predictions only to human our of their wisdom envisaged will come forward to study these predictions. The exact age in which watch such person will come for the study has also been foretold by the Rishies.</p>
      <p>These days we hear about people with powers of extra sensory perceptions.  (ESP).  The Rishies were Holy Sages who occupied themselves in concentrating on the one Divine Being Paramathma.  They far exceeded the powers of the E.S.P. People.</p>
    </header>
  </div>
</div>

Answer 3

Answer №2

This solution is perfect for Bootstrap 5. I found the answer right here.

<p  style="text-align: justify;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Answer 4

This solution is perfect for Bootstrap 5. I found the answer right here.

<p  style="text-align: justify;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Answer 5

Answer №3

To achieve this effect, simply insert the following code into your CSS or Bootstrap CSS document:

.text-align-justify{display: flex; justify-content: center;}

Now, in your HTML:

<div class="text-align-justify">Lorem Ipsum is simply placeholder text commonly used in the graphic, print, and publishing industries</div>

Answer 6

To achieve this effect, simply insert the following code into your CSS or Bootstrap CSS document:

.text-align-justify{display: flex; justify-content: center;}

Now, in your HTML:

<div class="text-align-justify">Lorem Ipsum is simply placeholder text commonly used in the graphic, print, and publishing industries</div>

Answer 7

Answer №4

Bootstrap does not have built-in support for justified text. They explain:

It is important to note that Bootstrap does not offer utility classes for justified text. Although justified text may look more visually appealing, it can make word-spacing uneven and as a result, harder to read.

Therefore, if you want to use justified text, you will need to define it yourself. This can be done inline:

<p  style="text-align: justify;">Lorem ipsum</p>

or by using a custom CSS class:

.justify{
  text-align: justify;
  }

<p  class="justify">Lorem ipsum</p>

Answer 8

Bootstrap does not have built-in support for justified text. They explain:

It is important to note that Bootstrap does not offer utility classes for justified text. Although justified text may look more visually appealing, it can make word-spacing uneven and as a result, harder to read.

Therefore, if you want to use justified text, you will need to define it yourself. This can be done inline:

<p  style="text-align: justify;">Lorem ipsum</p>

or by using a custom CSS class:

.justify{
  text-align: justify;
  }

<p  class="justify">Lorem ipsum</p>

Answer 9

Answer №5

To accomplish this, simply include the following code:

.about { text-align: justify; text-justify: inter-word; }

Answer 10

To accomplish this, simply include the following code:

.about { text-align: justify; text-justify: inter-word; }

Learn the art of perfectly aligning text in bootstrap 5

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The Python error message, "JSONDecodeError: Expecting value: line 1 column 1 (char 0)," indicates that there

Aligning divs, prevent duplicate HTML within multiple divs

Using jQuery, it is possible to automatically generate a new HTML input element and access it within

Transform the appearance of a complex image by altering its color using CSS

How can I eliminate the white bar elements from my dropdown menu? Also, seeking guidance on replacing an empty <div> tag in a boolean query

Image floating gracefully in the top corner of the screen

Achieving perfect alignment of an image within a Twitter Bootstrap cell when the height of the cell is uncertain

powerful enhancer separates the heading into a layout

Create styles for each component based on their specific props when designing a customized Material-UI theme

What is the best way to enable duplicate entries in ng-repeat?

An issue with Destination-Out Composition in HTML5 Canvas

Why isn't my textarea in jQUERY updating as I type?

What is the best way to display all the steps in a Material UI stepper when preparing a page for

Determining the primary image in Galleriffic

HTML displaying inaccurately

How do I implement a dynamic input field in Angular 9 to retrieve data from a list or array?

Tips for creating a custom Angular Material modal window that is fully responsive to its parent modal window

Guide on altering the cursor icon during an AJAX operation within a JQuery dialog

Achieve a Smooth Transition: Utilizing Bootstrap 3 to Create an Alert Box that Fades In upon Click and Fades Out

Arranging several lists in a row without any specific order