BootStrap: Trying to get 3 column layout but social icons don't want to jump up to the top line

Question

Using BootStrap trying to get a full column width heading and in medium to small sizes, would like single stacked column. The Social media icons don't seem to want to jump up to the top line when resized to full screen. Any help would be appreiciated. Thank you. Here is the codepen.io link and the code is below.

    <div class="pull-left row">
      <div class="col-sm-2">
        <img src="https://lh3.googleusercontent.com/7y0kWKxE4dgnlrTbZYvYYoY9ir9YR5aHtRxdnidEAR54I2ZyFm8Bb1G1NiXspp3EP6lmBQ=s86"
      </div>
    </div>
    <div class="row">
      <div class="col-sm-8">
        <h1 class="site-title h1 text-uppercase">Open Up<br> Language Services</h1>
        <small class="sub-title text-muted text-uppercase">Aprendizaje que teine impacto en tu mundo</small>
      </div>
      </div>
    </div>
    <div class="row">
      <span class="col-sm-2">
        <img src="http://res.cloudinary.com/erikrobles/image/upload/v1521666999/linkedInIcon_htpbxo.png">
      <img src="http://res.cloudinary.com/erikrobles/image/upload/v1521666999/linkedInIcon_htpbxo.png">
      <img src="http://res.cloudinary.com/erikrobles/image/upload/v1521666999/linkedInIcon_htpbxo.png">
      </span>
  </div>
</div>

score 0 · Answer 1 · answered Mar 21 '18 at 22:28

After a lot of head-scratching, I finally came up with the solution. Here it is:

<body>
<div>
  <div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
      <img src="https://lh3.googleusercontent.com/7y0kWKxE4dgnlrTbZYvYYoY9ir9YR5aHtRxdnidEAR54I2ZyFm8Bb1G1NiXspp3EP6lmBQ=s86">
    </div>
    <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
      <h1 class="site-title h1 text-uppercase">Open Up<br> Language Services</h1>
      <small class="sub-title text-muted text-uppercase">Aprendizaje que teine impacto en tu mundo</small>
    </div>
    <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
      <img src="http://res.cloudinary.com/erikrobles/image/upload/v1521666999/linkedInIcon_htpbxo.png">
  <img src="http://res.cloudinary.com/erikrobles/image/upload/v1521666999/linkedInIcon_htpbxo.png">
  <img src="http://res.cloudinary.com/erikrobles/image/upload/v1521666999/linkedInIcon_htpbxo.png">
    </div>
  </div>
</div>

You just need `col-sm-2` and `col-sm-8`.. everything else [is implied](https://stackoverflow.com/a/19865627/171456) — Carol Skelly, Mar 22 '18 at 11:56
Thanks Zim. Sometimes I tend to overcomplicate things. Cheers! — Erik James Robles, Apr 10 '18 at 19:52

BootStrap: Trying to get 3 column layout but social icons don't want to jump up to the top line

1 Answers1