Twitter Bootstrap Question posted in

Align div to the bottom of another div – Twitter bootstrap

I’m trying to align only the social media (instagram/facebook) so that they are all resting on the same row, while keeping the colorblocks of unknown height (since these are meant to be responsive logos) as they are (vertically centralised to one another).

Any comments on how to do so? I’m also working with twitter bootstrap.

Thanks in advance for any help given.

jsfiddle

HTML

<div class="row logoLocation vertical-align">
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 kite vcenter">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 kiteSocialMedia">
              Facebook/Instagram
            </div>    
        </div>

         <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 supermarket vcenter">                  
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 supermarketSocialMedia">
                Facebook/Instagram
              </div>
          </div>

          <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 koskos vcenter">
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 koskosSocialMedia">
            Facebook/Instagram
              </div>
          </div>
 </div> <!--row -->

CSS

.vertical-align{
  display:flex;
  align-items:center;
}

.kite{
  width:200px;
  height:200px;
  background-color:red;
  float:left;
}

.supermarket{
   width:150px;
  height:150px;
  background-color:blue;
  float:left;
}

.koskos{
  width:175px;
  height:400px;
  background-color:green;
  float:left;
}
Tags:

3

Answers


  1. 0

    If you want to keep some elements in same row, you have to divide the row.

    <div class="row">
   <div class="col-md-6">
   // Elements
   </div>

   <div class="col-md-6">
   // Elements
   </div>
</div>

    You can divide in any combination. Like: 4+4+4, 3+3+3+3......=12

    Login or Signup to reply.
  2. 0

    You can try position:absolute;. Adjust the top value for responsive screens.

    .kiteSocialMedia, .supermarketSocialMedia, .koskosSocialMedia {
 font-size: 15px;
 margin-top: 20px;
  position: absolute;
  top: 100px;
}
    Login or Signup to reply.
  3. 0

    Firstly, you would have to make all your divs the same height.

    You can use flexbox for that.

    Then push the “SocialMedia” div to the bottom either again using flexbox or absolute positioning if the image is to be vertically centered in the div.

    .logoLocation {
  display: flex;
}
.logoLocation > div {
  padding-top: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
[class$="SocialMedia"] {
  margin-top: auto;
  text-align: center;
  padding: 1em;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row logoLocation vertical-align">
  <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 kite vcenter">
    <a href="http://www.eat-at-kite.sg" target="_blank">
      <img class="img-responsive" src="http://thesupermarketco.sg/test/images/kite_logo.png" alt="Kite Logo" />
    </a>

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 kiteSocialMedia">
      <a class="fb" href="http://www.facebook.com/kiteoncraig" target="_blank">FACEBOOK</a>/
      <a class="insta" href="http://www.instagram.com/eatatkite" target="_blank">INSTAGRAM</a>
    </div>

  </div>

  <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 supermarket vcenter">
    <a href="http://www.sprmrkt.com.sg" target="_blank">
      <img class="img-responsive" src="http://thesupermarketco.sg/test/images/sprmrkt_logo.png" alt="SPRMKRT Logo">
    </a>

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 supermarketSocialMedia">
      <a class="fb" href="http://www.facebook.com/sprmrktsg" target="_blank">FACEBOOK</a>/
      <a class="insta" href="http://instagram.com/sprmrkt" target="_blank">INSTAGRAM</a>
    </div>

  </div>

  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 koskos vcenter">
    <img class="img-responsive" src="http://thesupermarketco.sg/test/images/koskos_logo.png" alt="Koskos Logo">

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 koskosSocialMedia">
      <a class="fb" href="http://www.facebook.com/koskos.sg" target="_blank">FACEBOOK</a>/
      <a class="insta" href="http://instagram.com/koskos_sg" target="_blank">INSTAGRAM</a>
    </div>

  </div>
</div>

    Codepen Demo (using flexbox).

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

Back To Top
Search