CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
tom clack
tom clack

Reputation: 191

How to align text on one column?

.col-md-4 {
  text-align:center
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

<div class="container">
    <div class="row">
        <div class="col-md-4">

            <p>
                Test
            </p>
            <p>
                Testttttttttttttt
            </p>


        </div>
    </div>

</div>

https://jsfiddle.net/jze8gqb1/1838/

I want to align text items in one column. I used display:inline-block but not working. How can I fix? Thank you.

Output 

          Test
    Testttttttttttttt

Desired Output

        Test
        Testttttttttttttt

Upvotes: 0

Views: 235

Answers (3)

Arkellys
Arkellys

Reputation: 7790

You can do this by using a single p tag and white-space: pre-line:

.col-md-4 {
  text-align:center
}

p {
  white-space: pre-line;
  text-align: left;
  display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>
        Test
        Testttttttttttttt
      </p>
    </div>
  </div>
</div>

You can find more information about the white-space property here.

Upvotes: 1

JozeV
JozeV

Reputation: 696

Try this

 <div class="container">
      <div class="row">
        <div class="col-md-4">
            <p class="text-left">
                Test
                <br>
                Testttttttttttttt
            </p>
        </div>
      </div>
    </div>

No CSS, just add class="text-left" to desired p element

Upvotes: 0

Jesse Castro
Jesse Castro

Reputation: 31

add this to your class class="text-left"

Upvotes: 0

Related Questions