RobertD RobertD - 7 months ago 24
HTML Question

Center text in bootstrap

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.

enter image description here



<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>




Answer

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>