CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Computer's Guy
Computer's Guy

Reputation: 5363

Align 3 elements inside a list-group-item in bootstrap

I'm trying to align a radio button, an input and some text inside one of my list-group-items, it looks good @desktop but @mobile it goes one on top of the other.

This is my code so far

<div class="panel panel-default">
      <div class="panel-body">
        <span style="color: #990000; font-size:17px;"><strong>8,55 €</strong></span> text
         <ul class="list-group">
    <li class="list-group-item"><input name="1" type="radio"> 1 text <strong>8,55 €</strong></li>
    <li class="list-group-item"><input name="2" type="radio"> 3 text <strong>8,55 €</strong></li>
    <li class="list-group-item"><input name="3" type="radio"> 6 text <strong>8,55 €</strong></li>
    <li class="list-group-item">
    <div class="container-fluid">
    <div class="row">
      <div class="col-md-1"><input name="n" type="radio" ></div><div class="col-md-3"><input type="text" name ="text" id="amount" class="form-control" placeholder="12"></div><div class="col-md-8" >text<strong>8,55 €</strong></div>
    </div>
    </div>
    </li>
  </ul>
      </div>
    </div>

Is there anything I can do to have it responsive and aligned in mobile as well as dekstop?

Upvotes: 1

Views: 2076

Answers (1)

Jason
Jason

Reputation: 306

You can use col-xs-* in place of col-md-*: fiddle example

<div class="col-xs-1">
    <input name="n" type="radio" >
</div>
<div class="col-xs-3">
    <input type="text" name ="text" id="amount" class="form-control" placeholder="12">
</div>
<div class="col-xs-8" >
    text<strong>8,55 €</strong>
</div>

Upvotes: 2

Related Questions