Center text in bootstrap

Question

I have the following html code in bootstrap and I want to center all things to center but aligned to the left, I add here a image to understand better.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<dl class="sp-methods text-center">
 <dt>Free Shipping</dt>
 <dd>
  <ul>
   <li>
    <div class="radio">
     <label for="s_method_freeshipping_freeshipping">
     <input class="radio" type="radio" checked="checked" value="freeshipping_freeshipping" name="shipping_method">Free<span class="price">$0.00</span></label>
    </div>
   </li>
  </ul>
 </dd>
 <dt>Choose Your Shipping Method</dt>
 <dd>
  <ul>
   <li>
    <div class="radio">
     <label for="s_method_my_1">
     <input id="s_method_my_1" class="radio" type="radio" value="s_method_my_1" name="shipping_method">7 Kg<span class="price">$57</span></label>
    </div>
   </li>
   <li class="text-center">
    <div class="radio">
     <label for="s_method_my_2">
     <input id="s_method_my_2" class="radio" type="radio" value="s_method_my_2" name="shipping_method">5 Kg<span class="price">$15</span></label>
    </div>
   </li>
  </ul>
 </dd>
</dl>

but not in the left, I want to be centered but aligned to left in center — Robert, Apr 24 '16 at 08:21

score 1 · Accepted Answer · answered Apr 24 '16 at 08:25

Do like this, where you add a wrapper, <div class="text-center">, set text-left to your <dl class="sp-methods text-left"> and add .sp-methods { display: inline-block; } to your CSS

.sp-methods {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="text-center">
  <dl class="sp-methods text-left">
    <dt>Free Shipping</dt>
    <dd>
      <ul>
        <li>
          <div class="radio">
            <label for="s_method_freeshipping_freeshipping">
              <input class="radio" type="radio" checked="checked" value="freeshipping_freeshipping" name="shipping_method">Free<span class="price">$0.00</span></label>
          </div>
        </li>
      </ul>
    </dd>
    <dt>Choose Your Shipping Method</dt>
    <dd>
      <ul>
        <li>
          <div class="radio">
            <label for="s_method_my_1">
              <input id="s_method_my_1" class="radio" type="radio" value="s_method_my_1" name="shipping_method">7 Kg<span class="price">$57</span></label>
          </div>
        </li>
        <li>
          <div class="radio">
            <label for="s_method_my_2">
              <input id="s_method_my_2" class="radio" type="radio" value="s_method_my_2" name="shipping_method">5 Kg<span class="price">$15</span></label>
          </div>
        </li>
      </ul>
    </dd>
  </dl>
</div>

Is perfect LGSon thank you so much, your code is working like a charm — Robert, Apr 24 '16 at 08:41

score 0 · Answer 2 · answered Apr 24 '16 at 08:20

0

The simplest way is to give it a fixed width and use margin: 0 auto.

.sp-methods {
  width: 700px;
  margin: 0 auto;
}

answered Apr 24 '16 at 08:20

James Lawson

8,150
48
47

thank you but I can't to have fixed width there, is with bootstrap and is responsive – Robert Apr 24 '16 at 08:21
please see: http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div you can use `display: table` and `margin: 0 auto` if you don't want to have a fixed width (or alternatively, you can specify the width at each breakpoint of your website) – James Lawson Apr 24 '16 at 08:23

score 0 · Answer 3 · answered Apr 24 '16 at 08:26

Use this snippet:

ul{
  list-style: none;
}
.sp-methods{
  margin:0 auto;
  width:50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<dl class="sp-methods">
 <dt>Free Shipping</dt>
 <dd>
  <ul>
   <li>
    <div class="radio">
     <label for="s_method_freeshipping_freeshipping">
     <input class="radio" type="radio" checked="checked" value="freeshipping_freeshipping" name="shipping_method">Free<span class="price">$0.00</span></label>
    </div>
   </li>
  </ul>
 </dd>
 <dt>Choose Your Shipping Method</dt>
 <dd>
  <ul>
   <li>
    <div class="radio">
     <label for="s_method_my_1">
     <input id="s_method_my_1" class="radio" type="radio" value="s_method_my_1" name="shipping_method">7 Kg<span class="price">$57</span></label>
    </div>
   </li>
   <li>
    <div class="radio">
     <label for="s_method_my_2">
     <input id="s_method_my_2" class="radio" type="radio" value="s_method_my_2" name="shipping_method">5 Kg<span class="price">$15</span></label>
    </div>
   </li>
  </ul>
 </dd>
</dl>

Center text in bootstrap

3 Answers3