Twitter Bootstrap Question posted in

How to change align when resizing with Boostrap?-Twitter bootstrap

I have the following footer below using bootstrap:

.align-center {
  text-align: center;
}

#footer {
  background-color: #3c3d41;
  color: white;
  padding-top: 25px;
  padding-bottom: 10px;
}

.footer-social-media-text {
  text-decoration: none;
  height: 25px;
  color: white;
  white-space: nowrap;
}

.footer-social-media-icon {
  padding-right: 8px;
  margin-left: 30px;
  margin-right: 2px;
  font-weight: bold;
  height: 25px;
  color: white;
}

#footer a {
  -o-transition: .25s;
  -ms-transition: .25s;
  -moz-transition: .25s;
  -webkit-transition: .25s;
  transition: .25s;
}

#footer a:hover {
  text-decoration: none;
  color: greenyellow;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<footer id="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <a href="https://www.mycompany.com/" class="footer-social-media-text">
          <i class="fa fa-home fa-2x social footer-social-media-icon"></i> My Company
        </a>
      </div>
      <div class="col-md-9">
        <a href="https://www.facebook.com" class="footer-social-media-text pull-right">
          <i class="fa fa-facebook fa-2x social footer-social-media-icon"></i> Facebook
        </a>
        <a href="https://www.instagram.com" class="footer-social-media-text pull-right">
          <i class="fa fa-instagram fa-2x social footer-social-media-icon"></i> Instagram
        </a>
        <a href="https://twitter.com" class="footer-social-media-text pull-right">
          <i class="fa fa-twitter fa-2x social footer-social-media-icon"></i> Twitter
        </a>
      </div>
    </div>
    <hr />
    <p class="align-center">© 2017 My Company</p>
  </div>
</footer>

</div>

</div>

https://jsfiddle.net/coyagf2b/

My issue is the code above is that the width threshold using the bootstrap grid does not really match my expectation: <div class="col-md-3"> and <div class="col-md-9">.

Basically I would like to:

  • Having the right part stacking below the left part when it’s the page width is heavily reduced I tried different col-md-x / col-lg-x / col-sm-x without much result…
  • Change the content align of the two parts to center when the right part is stacking below

How can I do that?

Tags:

2

Answers


  1. 0

    Bootstrap’s col-xs- classes do work perfectly find with your code. If you want the right column to fall underneath the left then I would just add col-xs-12 on each of the col-md- divs you have. And you center only on mobile you can use some media queries to achieve that. Something like looks like:

    @media (max-width: 991px){
  .centerSection{
    text-align:center;
  }
}

@media (min-width: 992px){
  .rightSection {
    float:right;
  }
}

    And here is a link to a working codepen:

    https://codepen.io/egerrard/pen/rGrPmM

    Login or Signup to reply.
  2. 0

    Check this example, using .text-center, .float-md-left and .float-md-right.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search