CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
tm1701
tm1701

Reputation: 7591

Bootstrap - in <li> - formatting columns that are responsive

In list elements (Bootstrap: <li>) I would like to format a line in columns. Each line consists of e.g. 4 data elements, each put in its own column. I don't want to use a table because of responsiveness requiremnts.

A way of doing this (in a rather static way) is shown below. Is there a better way to do this? For brevity I put the style element in the HTML code. This way would even increase the height of a <li> element if a data element spreads across 2 lines (on small devices). 

<div class="row">
  <ul>
    <li class="list-group-item" style="height:3em">
      <span class="col-xs-6 col-sm-2">{{ useraccess.name }}</span>
      <span class="col-xs-6 col-sm-2">{{ useraccess.requestDate | date:'MM-dd' }}</span>
      <span class="col-xs-6 col-sm-4">{{ useraccess.requestAction }}</span>
      <span class="col-xs-6 col-sm-4">{{ useraccess.argument }}</span>
    </li>
        <li class="list-group-item" style="height:3em">
      <span class="col-xs-6 col-sm-2">{{ useraccess.name }}</span>
      <span class="col-xs-6 col-sm-2">{{ useraccess.requestDate | date:'MM-dd' }}</span>
      <span class="col-xs-6 col-sm-4">{{ useraccess.requestAction }}</span>
      <span class="col-xs-6 col-sm-4">{{ useraccess.argument }}</span>
    </li>
  </ul>
</div>

Upvotes: 0

Views: 848

Answers (1)

user7207170
user7207170

Reputation:

You can make use of display:flex on .list-group-item container and set a fix width to it beyond which it shouldn't grow as well as you can set a min-height if you want the height to grow dynamically as per the requirements.

.row ul li{
list-style-type:none;
}

.list-group-item{
display:flex;
width:80%;
justify-content:space-between;
flex-direction:row;
flex-flow:row wrap;
min-height:3em;
}

.items{

}
<div class="row">
  <ul class="list">
    <li class="list-group-item">
      <span class="items">Name1</span>
      <span class="items">Date1</span>
      <span class="items">Action1</span>
      <span class="items">Arg1</span>
    </li>
        <li class="list-group-item">
      <span class="items">Name2</span>
      <span class="items">Date2</span>
      <span class="items">Action2</span>
      <span class="items">Arg2</span>
    </li>
  </ul>
</div>

Bootstrap responsive grid:

div{
width:100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div>
  <ul>
    <li class="list-group-item row" >
      <span class="col-xs-6 col-sm-2">Name</span>
      <span class="col-xs-6 col-sm-2">Date</span>
      <span class="col-xs-6 col-sm-4">Action</span>
      <span class="col-xs-6 col-sm-4">Arg</span>
    </li>
        <li class="list-group-item row">
      <span class="col-xs-6 col-sm-2">Name</span>
      <span class="col-xs-6 col-sm-2">Date</span>
      <span class="col-xs-6 col-sm-4">Action</span>
      <span class="col-xs-6 col-sm-4">Arg</span>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions