Twitter Bootstrap Question posted in

Place Button to the Bottom Right of a List – Twitter bootstrap

Please see attached code snippet. I have an ‘item’ component, where I’m going to dynamically retrieve the Title and some bullet descriptions.

Each Item is going to have an ‘Add Item’ button, which I’d like to be aligned to the bottom right of the list – not underneath.

How can I do this whilst ensuring that the list text drops onto a new line where appropriate?

I want to avoid putting the span within the list. Is there a Bootstrap way of doing this and if not is there an alternative way?

Thank you,

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


  <body>
    <div class="container bg-info">
      <div class="col-xs-4">
        <h1>Item Title</h1>
      </div>
      <div class="col-xs-8">
        <span type="button" class="btn btn-success pull-right">Add Item</span>
        <ul class="list-unstyled">
          <li>
            <i class="fa fa-check" aria-hidden="true"></i> 
            Description 1, Description 1, Description 1, Description 1</li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i>
            Description 2
            </li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i> 
            Description 3, Description 3, Description 3, Description 3</li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i>
            Description 4, Description 4, Description 4, Des 4</li>
        </ul>
      </div>
    </div>
  </body>
Tags:

2

Answers


  1. 0

    I think you can use position

    .container {
    position: relative;
}

.btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

    EDIT
    try adding width to your ul

    .list-unstyled {
    width: 85%;
}
    Login or Signup to reply.
  2. 0 
    <body>
    <div class="container bg-info">
      <div class="col-xs-4">
        <h1>Item Title</h1>
      </div>
      <div class="col-xs-8">        
        <ul class="list-unstyled">
          <li>
            <i class="fa fa-check" aria-hidden="true"></i> 
            Description 1, Description 1, Description 1, Description 1</li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i>
            Description 2
            </li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i> 
            Description 3, Description 3, Description 3, Description 3</li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i>
            Description 4, Description 4, Description 4, Des 4
               <span type="button" class="btn btn-success pull-right">Add Item</span>
          </li>             
        </ul>      
      </div>     
    </div>
  </body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search