CODEWITHSUNDEEP
csstwitter-bootstrap-3
43Tesseracts
43Tesseracts

Reputation: 4937

Split a bootstrap list-group-item into two columns

If I have a Bootstrap 3 list-group of <a> elements. I would like one of them split in half so that within the group it looks similar to a button group as shown in the snippet.

How can I do this?

.container {
  width: 75%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="list-group">
    <a href="#" class="list-group-item left-side">Left Side</a>
    <a href="#" class="list-group-item right-side">Right Side</a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
  </div>
  
  <p>How to divide list-group-items .left-side and .right-side so they appear on the same line but seperated similar to this:

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <a type="button" class="btn btn-default">Left Side</a>
  <a type="button" class="btn btn-default">Right Side</a>
</div>
   
</div>

Upvotes: 5

Views: 5511

Answers (2)

happymacarts
happymacarts

Reputation: 2595

Class your special case so we can target the items with the correct specificity

Notice the .clearfix that will put the floats back where they should be once finished.

.container {
  width: 75%;
}

.list-group-item.left-side,
.list-group-item.right-side {
  margin: 0 0 -1px;
  float: left;
  width: 50%;
  border-bottom-width:0px;
}

.split-items .list-group-item.left-side{
  border-top-right-radius:0px;
  border-bottom-right-radius:0px;
}

.split-items .list-group-item.right-side{
  border-top-left-radius:0px;
  border-bottom-left-radius:0px;
  border-bottom-right-radius:0px;
  border-top-right-radius:4px;
  border-left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<br>
<div class="container">
  <div class="list-group">
    <div class="clearfix split-items">
      <a href="#" class="list-group-item left-side">Left Side</a>
      <a href="#" class="list-group-item right-side ">Right Side</a>
    </div>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
  </div>
</div>

Upvotes: 3

David
David

Reputation: 801

Why don't you just float the a tags?

Add float:left and width:50% to your .list-group-item CSS: 

.list-group-item {
 position: relative;
 display: block;
 padding: 10px 15px;
 margin-bottom: -1px;
 background-color: #fff;
 border: 1px solid #ddd;
 width: 50%;
 float: left }

Upvotes: 0

Related Questions