Twitter Bootstrap Question posted in

Twitter Bootstrap – How to align two <li> tags with a badge class

I’ve posted the image of what problem I’m facing. It’s very simple:
There are two list items I want to display but they are not aligned properly. I want the End Date list item to be aligned with the green badge next to it. How do I take out the space between the grey and green badges??

enter image description here

The code is as follows: 

<li>
   <img src="/uploads/avatars/avatar.png" alt="" class="pull-left img-circle"/>
      <div class="news-item-info">
         <h4 class="name">{{ $name }}</h4>
            <div class="position "><u>Start Date (inclusive):</u>
               <div class="value pull-right badge ">
                  {{date('d M Y', strtotime($startdate))}}
               </div>
            </div>
            <div class="position"><u>End Date (inclusive):</u>
               <div class="value pull-right badge badge-success">
                  {{date('d M Y', strtotime($enddate))}}
               </div>
            </div>
         </div>
      </li>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to @ZimSystem's comment above. The final code I used is as follows:

    <li>
   <img src="/uploads/avatars/avatar.png" alt="" class="pull-left img-circle"/>
   <div class="news-item-info">
      <h4 class="name">{{ $name }}</h4>
         <span class="key pull-left "><u>Start Date (inclusive):</u></span>
            <div class="value pull-right">
               <span class="badge">{{date('d M Y', strtotime($startdate))}}</span>
            </div>
            <span class="key pull-left"><u>End Date (inclusive):</u></span>
           <div class="value pull-right">
              <span class="badge badge-success">{{date('d M Y', strtotime($enddate))}}</span>
           </div>
      </div>
</li>

  2. 0

    Use bootstrap: see the following example

    <div class="container">
    <div class="col-lg-12">
            <a href="###" class="col-lg-2">start date</a>
            <span class="col-lg-2 pull-left">09-12-2016</span>
    </div>
    <div class="col-lg-12">
            <a href="###" class="col-lg-2">end date</a>
            <span class="col-lg-2 pull-left">15-12-2016</span>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search