Align buttons center small screen bootstrap

Question

I am trying to align my buttons to the center of the mobile screen when the screen size gets small, tried setting text-align to center but that doesn't seem to work.

It must be something with the pull left / text right bootstrap class im trying to override, just not too sure what I am missing.

CSS:

@media screen and (max-width: 998px) {

    @font-face{
        font-family: 'Gotham';
        src: url("assets/fonts/Gotham-Bold.otf");
        src: url("assets/fonts/Gotham-Light.otf");
    }

    @font-face {
    font-family: "Gotham-Bold";
    src: url("assets/fonts/Gotham-Bold.otf");
    font-weight: Bold;
    }

    @font-face {
    font-family: "Gotham-Light";
    src: url("assets/fonts/Gotham-Light.otf");
    font-weight: Light;
    }

    .col-md-4.pull-left.text-right{
        position: relative;
        text-align: center;
    }
.
.
.

HTML:

<div class="container-fluid">
    <div class="row">
            <div class="col-sm-8 pull-right text-left" >
                <div class="IMGpadding"></div><br>
                <img style="float:left" class="img-responsive" src = "assets/images/white-leaf-bg.jpg" id="frame"/>
            </div>
            <div class="col-md-4 pull-left text-right" >
                <div class="h1padding"></div>
                <a style="float:right" class = "h1" href="" id="introID"><b>INTRO</b></a>

                <div class="h1padding"></div>
                <a style="float:right" class = "h1" href="" id="OnSuerfaceID"><b>ON THE</b> <span class="light">SURFACE</span></a>

                <div class="h1padding"></div>
                <a style="float:right"  href="" id="FromOilID"><b>FROM</b> <span class="light">ORE TO OIL</span></a>

                <div class="h1padding"></div>
                <a style="float:right"  href="" id="EnvImpactID"><b>ENVIRONMENTAL</b> <span class="light">CARE</span></a>

                <div class="h1padding"></div>
                <a style="float:right" class = "h1" href="" id="MoreThanGasID"><b>MUCH MORE THAN</b> <span class="light">GASOLINE</span></a>

                <div class="h1padding"></div>
                <a style="float:right" class = "h1" href="" id="OneMoreID"><b>ONE MORE</b> <span class="light">THING</span></a>

            </div>
    </div>
</div>

Thanks in advance, I am still very much a noob at bootstrap.

Possible duplicate of [How to center buttons in Twitter Bootstrap 3?](https://stackoverflow.com/questions/22578853/how-to-center-buttons-in-twitter-bootstrap-3) — Luke Glazebrook, Oct 05 '17 at 21:32

score 1 · Accepted Answer · answered Oct 06 '17 at 09:26

It depends on your other pages as well as. As per your requirement and code added here, I have added a working copy in codepen. Try this:

@media screen and (max-width: 998px) {

    @font-face{
        font-family: 'Gotham';
        src: url("assets/fonts/Gotham-Bold.otf");
        src: url("assets/fonts/Gotham-Light.otf");
    }

    @font-face {
    font-family: "Gotham-Bold";
    src: url("assets/fonts/Gotham-Bold.otf");
    font-weight: Bold;
    }

    @font-face {
    font-family: "Gotham-Light";
    src: url("assets/fonts/Gotham-Light.otf");
    font-weight: Light;
    }

    .col-sm-4.pull-left.text-right{
        position: relative;
        text-align: right;
      width:50%;
      text-align:right;
    }
  .h1padding {
    margin-bottom:100px;
  }
}

<div class="container-fluid">
    <div class="row">
            <div class="col-sm-8 pull-right text-left" >
                <div class="IMGpadding"></div><br>
                <img style="float:left" class="img-responsive" src = "assets/images/white-leaf-bg.jpg" id="frame"/>
            </div>
            <div class="col-sm-4 pull-left text-right" >
                <div class="h1padding"></div>
                <a class = "h1" href="" id="introID"><b>INTRO</b></a>

                <div class="h1padding"></div>
                <a class = "h1" href="" id="OnSuerfaceID"><b>ON THE</b> <span class="light">SURFACE</span></a>

                <div class="h1padding"></div>
                <a  href="" id="FromOilID"><b>FROM</b> <span class="light">ORE TO OIL</span></a>

                <div class="h1padding"></div>
                <a  href="" id="EnvImpactID"><b>ENVIRONMENTAL</b> <span class="light">CARE</span></a>

                <div class="h1padding"></div>
                <a class = "h1" href="" id="MoreThanGasID"><b>MUCH MORE THAN</b> <span class="light">GASOLINE</span></a>

                <div class="h1padding"></div>
                <a class = "h1" href="" id="OneMoreID"><b>ONE MORE</b> <span class="light">THING</span></a>

            </div>
    </div>
</div>

codepen link

score 0 · Answer 2 · answered Oct 06 '17 at 11:05

0

Since you're using bootstrap, you can use .visible-sm, .visible-md and .visible-lg classes. For more info: https://getbootstrap.com/docs/3.3/css/#responsive-utilities.

answered Oct 06 '17 at 11:05

Blues Clues

1,694
3
31
72

Align buttons center small screen bootstrap

2 Answers2