CODEWITHSUNDEEP
twitter-bootstraptextalignment
Mothupally
Mothupally

Reputation: 780

Align text in bootstrap col fields

I have a requirement of displaying name value pairs in html using bootstrap. I am using the class "col-md-1" for name and value columns and so the data is displayed in two columns. The problem is that as bootstrap divides the screen in 12 columns, it leaves much space to the left and right of the content in field values. I tried using the classes "text-left","text-right" but it doesn't seem to work in conjunction with "col-md-" classes. How can one align text to left or right in bootstap columns (say col-md-) without hardcoding left or right in style to certain pixels? 

   <div class="row">
      <div class="col-md-1">column1</div>
      <div class="col-md-1"><p class="text-right">Name</p></div>
      <div class="col-md-1"><p class="text-left">Value</p></div>
      <div class="col-md-1">column4</div>
      <div class="col-md-1">column5</div>
      <div class="col-md-1">column6</div>
      <div class="col-md-1">column7</div>
      <div class="col-md-1">column8</div>
      <div class="col-md-1">column9</div>
      <div class="col-md-1">column10</div>
      <div class="col-md-1">column11</div>
      <div class="col-md-1">column12</div>
  </div>

Upvotes: 4

Views: 22499

Answers (3)

Skander Jenhani
Skander Jenhani

Reputation: 75

This code works also to center content of columns in a bootstrap row :

<div class="row text-center">

Upvotes: 0

Suganth G
Suganth G

Reputation: 5156

Try this:

Use 'row' class , it will avoid padding

 <div class="col-md-1"><p class="row text-right">Name</p></div>
 <div class="col-md-1"><p class="row text-left">Value</p></div>

DEMO

Upvotes: 5

Rohit
Rohit

Reputation: 324

Hope this Help You can use it like following

<div class="col-md-1 text-center">

For Detail have a look at following link Jsfiddle

Any furthur questions are welcomed

Thanks ROHIT

Upvotes: 4

Related Questions