pavlenko pavlenko - 8 months ago 24
CSS Question

Bootstrap 3 change <ul> height inside row

inside row, I have list, and each

tag has set left and right border.

<div class="container>
<div class="row>
<ul class="list">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>

ul.list > li {
border-right:1px solid #eeeeee;
border-left:1px solid #eeeeee;

enter image description here
Now, I need to set ul.test height to 100% inside row,to remove padding-top and padding-bottom from row,then borders for
  • tags will stay from top to bottom of row.

    I try couple ideas with row padding,with list height but no success

  • Answer

    According to bootstrap docs you need to have .col-*-* as a direct child of .row

    Then you need to remove bootstrap default margin-bottom of ul and padding-left/right from .col-*-*

    .row {
      background: red
    .container ul {
      background: lightgreen;
      margin-bottom: 0
    .container li {
      border: solid #eee;
      border-width: 0 1px;
      display: inline-block;
      /* demo */
      padding:0 5px;
      margin:0 5px
    .container div[class^="col-"] {
      padding: 0
    <link href="" rel="stylesheet" />
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <ul class="list">
            <li><a href="#">1</a>
            <li><a href="#">2</a>
            <li><a href="#">3</a>
            <li><a href="#">4</a>