How to justify text with letters from a to z in div in Bootstrap 3?

Question

I would like to have the list of letters from A to Z justified over the whole width of the div with class="col-md-12". Where do I have to add text-justify? I tried almost every location to put it. Thanks Thorsten

<div class="row">
    <div class="col-md-12">             
        A, B, C, D, E, F, ... ,Z            
    </div>
</div>

it is never handy to start writting inmideatly in a column. You better add some element to write it in, such as a paragraph. You can add your justify class to that — Dorvalla, Jun 20 '15 at 11:28

score 3 · Accepted Answer · edited May 23 '17 at 11:58

3

Wrap your A-Z inside a paragraph and assign the bootstrap alignment class text-justify To occupy the full width of the div. You can set a pseudo-element :after that fakes a empty space/block after the paragraph. The inline-block will stretch the text to meet the content in the :after pseudo element.

Thanks for the hack: Answer from Mutil

p:after {
  content: "";
  display: inline-block;
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-12">
    <p class="text-justify">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
  </div>
</div>

edited May 23 '17 at 11:58

Community

1
1

answered Jun 20 '15 at 11:19

m4n0

29,823
27
76
89

How do you want your result to be? – m4n0 Jun 20 '15 at 11:37
That the list of letter spans from left to right over the whole width of the div class="col-md-12". But even with your solution it stays on the left side. – Thorsten Jun 20 '15 at 11:40
Glad it worked! :) If you are wondering why the scroll bar is appearing, you need to wrap the row inside a container. – m4n0 Jun 20 '15 at 11:51

score 1 · Answer 2 · answered Jun 20 '15 at 11:17

1

put the letters in <p> /* here */ </p> tag and set

p {
  text-align: justify;
}

answered Jun 20 '15 at 11:17

nikola_wd

607
5
9

How to justify text with letters from a to z in div in Bootstrap 3?

2 Answers2