Bootstrap get div to align in the center

后端 未结 2 1440
庸人自扰
庸人自扰 2020-12-08 21:01

I am trying to get some buttons on my footer to align to the center but for some reason it does not seem to work.

相关标签:
2条回答
  • 2020-12-08 21:27

    When I align elements in center I use the bootstrap class text-center:

    <div class="text-center">Centered content goes here</div>

    0 讨论(0)
  • 2020-12-08 21:47

    In bootstrap you can use .text-centerto align center. also add .row and .col-md-* to your code.

    align= is deprecated,

    Added .col-xs-* for demo

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <div class="footer">
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <p>Hello there</p>
          </div>
          <div class="col-xs-4 text-center">
            <a href="#" class="btn btn-warning" onclick="changeLook()">Re</a>
            <a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a>
          </div>
          <div class="col-xs-4 text-right">
            <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
            <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
            <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
          </div>
        </div>
      </div>
    </div>

    UPDATE(OCT 2017)

    For those who are reading this and want to use the new version of bootstrap (beta version), you can do the above in a simpler way, using Boostrap Flexbox utilities classes

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <div class="container footer">
      <div class="d-flex justify-content-between">
        <div class="p-1">
          <p>Hello there</p>
        </div>
        <div class="p-1">
          <a href="#" class="btn btn-warning" onclick="changeLook()">Re</a>
          <a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a>
        </div>
        <div class="p-1">
          <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
          <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
          <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
        </div>
      </div>
    </div>

    0 讨论(0)
提交回复
热议问题