Centering text within div using bootstrap

Question

Trying to familiarize myself with Bootstrap and its grid system. Below shows my attempt at creating a footer, I wouldn't like to use all 12 cols, at the moment it looks fine - but for some reason I am unable to center the list items within the div. I've tried playing with Google dev tools but can't really find the reason why.

.wrapper{
    width:80%;
    margin:0 auto;
}
.footer{
    margin:0 auto;
    text-align:center;
}

HTML

  <div class="row footer">
            <div class="wrapper clearfix">
                <div class="col-md-2 ">
                    <ul>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <ul>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <ul>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <ul>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                    </ul>
                </div>
            </div>
        </div>

This seems to be working as expected, what are you trying to achieve? The items centered within their lists, or the lists centered in the footer? — Ben Kolya Mansley, Aug 27 '17 at 14:25
Col-*s are set to float:left by default in bootstrap we need a reset Check th link https://jsfiddle.net/7acynjLj/1/ — Gildas.Tambo, Aug 27 '17 at 14:36

score 0 · Answer 1 · answered Aug 27 '17 at 14:46

0

use

.footer ul {
  display: grid;
  justify-content: center;
}

demo

answered Aug 27 '17 at 14:46

Md. Mrinal Haque

9
1
3

Centering text within div using bootstrap

1 Answers1