Break and center list items onto a new line in bootstrap

HTML & CSS
1

Hi there,

I am using bootstrap to create an ordered list. However, what I would like to do is to center the list items if they break onto a new line.

For example:

<ul>
                            <li class="col-md-3">
                                <span class="label-nb"><i class="icon-check" aria-hidden="true"></i></span>
                                <h3>item 1</h3>
                            </li>

                            <li class="col-md-3">
                                <span class="label-nb"><i class="icon-check" aria-hidden="true"></i></span>
                                <h3>item 2</h3>
                            </li>

                            <li class="col-md-3">
                                <span class="label-nb"><i class="icon-check" aria-hidden="true"></i></span>
                                <h3>item 3</h3>
                            </li>

                            <li class="col-md-3">
                                <span class="label-nb"><i class="icon-check" aria-hidden="true"></i></span>
                                <h3>item 4</h3>
                            </li>

                            <li class="col-md-3">
                                <span class="label-nb"><i class="icon-check" aria-hidden="true"></i></span>
                                <h3>item 5</h3>
                            </li>

                            <li class="col-md-3">
                                <span class="label-nb"><i class="icon-check" aria-hidden="true"></i></span>
                                <h3>item 6</h3>
                            </li>
</ul>

So for example when items 5 and 6 break onto a new line, they are centered under the top 4. Also, the same if there were 7 items.

How would I do this?

Thanks

2

Hi @toolman,

You could try flex: http://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Flexbox Cheatsheet: http://jonibologna.com/flexbox-cheatsheet/

E.g:


ul{
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
}
li{
    display:flex; /* control the items' content */
    justify-content:center; /* horizontally */
    align-items:center; /* vertically */
/* and some item styling for clarity: */
    outline:2px solid;
    outline-offset: -1px;
    width:200px;
    height:100px;
}

That’s one way to do it. Hope it’s suitable in the bootstrap context you have for the list. :slight_smile:

1 Like
3

It should work ok in a bootstrap grid.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
ul.centred-ul{
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
}
centred-ul li{
    display:flex; /* control the items' content */
    justify-content:center; /* horizontally */
    align-items:center; /* vertically */
/* and some item styling for clarity: */
    outline:2px solid;
    outline-offset: -1px;
    width:200px;
    height:100px;
}


</style>
</head>
<body>
<div class="container">
  <ul div class="row centred-ul">
    <li class="col-md-3"> <span class="label-nb"><i class="icon-check" aria-hidden="true"></i></span>
      <h3>item 1</h3>
    </li>
    <li class="col-md-3"> <span class="label-nb"><i class="icon-check" aria-hidden="true"></i></span>
      <h3>item 2</h3>
    </li>
    <li class="col-md-3"> <span class="label-nb"><i class="icon-check" aria-hidden="true"></i></span>
      <h3>item 3</h3>
    </li>
    <li class="col-md-3"> <span class="label-nb"><i class="icon-check" aria-hidden="true"></i></span>
      <h3>item 4</h3>
    </li>
    <li class="col-md-3"> <span class="label-nb"><i class="icon-check" aria-hidden="true"></i></span>
      <h3>item 5</h3>
    </li>
    <li class="col-md-3"> <span class="label-nb"><i class="icon-check" aria-hidden="true"></i></span>
      <h3>item 6</h3>
    </li>
  </ul>
</div>
</body>
</html>

Keep to the grid rules as columns have to be direct children of a row.

Also the use of all those h3 tags doesn’t seem semantic. It’s not a list of headings but a list of items isn’t it?

3 Likes
4

Thanks, it worked :slight_smile:

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.