Twitter Bootstrap Question posted in

CSS/Bootstrap: Align Font-Awesome icons in right-bottom corner of sidebar – Twitter bootstrap

I have a problem with aligning icons inside the sidebar. I want to have a few social icons in right-bottom corner of a sidebar.I tried using margins but it looks horrible and ugly.

Here’s an example in JSBin (please resize the window to at least 1000px).

html, body, .container-fluid, .row {
  height: 100%;
}

body {
  background-color: #F2F0F1;
}

.sidebar {
  background-color: tomato;
}

@media (min-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    background-color: tomato;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  }
}

ul li {
  margin: 0 auto;
  line-height: 50px;
  list-style: none;
  text-align: right;
  margin-right: 20px;
}

ul li a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 4px;
  color: tomato;
}

.hi {
  margin-right: 20px;
  text-align: right;
  color: rgba(0, 0, 0, 0.4);
}

.content {
  padding: 2% 4% 2% 4%;
  color: rgba(0, 0, 0, 0.4);
  background-color: #F2F0F1;
}

#fixedbutton {
  position: fixed;
  top: 0px;
  right: 0px;
}

.sidebar-bottom-wrap {
  position: absolute;
  bottom: 60px;
  right: 40px;
  max-width: 200px;
}

.icons-sidebar-unit {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  vertical-align: baseline;
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PRZEMO PORTFOLIO</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>
    
  <body>
    <!-- SIDEBAR -->
    <div class="container">
      <div class="row">
        <div class="col-md-3 sidebar"><div class="foto">
          <img src="pic.png" class=" img-responsive img-circle " alt="pic">
        </div>
        <h3 class="hi">Hi! I am <strong>Mike</strong> ,a front-end developer.</h2>

        <!-- MENU -->
        <ul>
          <li><a href="#about">ABOUT</a></li>
          <li><a href="#projects">PROJECTS</a></li>
          <li><a href="#contact">CONTACT</a></li>
        </ul>

        <!-- footer ICONS -->
        <footer>
          <!--Social icons-->
          <div class="social-icons-sidebar">
            <a title="Follow us" href="https://twitter.com/uiueux" class="icons-sidebar-unit">
              <i class="fa fa-twitter-square"></i>
            </a>
            <a title="Follow us" href="https://www.facebook.com/Uiueux/" class="icons-sidebar-unit">
              <i class="fa fa-facebook-square"></i>
            </a>
            <a title="" href="#" class="icons-sidebar-unit">
              <i class="fa fa-google-plus-square"></i>
            </a>
            <a title="" href="https://www.youtube.com/playlist?list=PLJkj39CuqdNz7WTWdHTbSrOvQL03sIZa-" class="icons-sidebar-unit">
              <i class="fa fa-youtube-square"></i>
            </a>
          </div>
    
          <div class="copyright">
						Copyright © 2017. Designed by
						<a href=http://www.uiueux.com>wwwS</a>.
					</div><!--End copyright-->
    
          <!--
          <i class="fa fa-linkedin A " aria-hidden="true"></i>
          <i class="fa fa-github" aria-hidden="true"></i>
          <i class="fa  fa-envelope-o" aria-hidden="true"></i>
          -->
          </div>
    		</footer>

    		<!-- MAIN -->
        <div class="col-md-9 col-md-offset-3 content">
          <h2 id="about">ABOUT ME</h2>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
          <div class="container-fluid">
            <h2 id="projects">RECENT PROJECTS</h2>
              <div class="row">
                <div class="col-md-9">
                  <div class="col-xs 12 col-sm-6  col-sm-6 col-md-6   ">
                    <img src="1.png" alt="" class="img-responsive img-thumbnail">
                  </div>
                  <div class="col-xs 12 col-sm-6  col-sm-6 col-md-6  ">
                    <img src="2.png" alt="" class="img-responsive img-thumbnail">
                  </div>
                  <div class="col-xs 12 col-sm-6  col-sm-6 col-md-6  ">
                    <img src="3.png" alt="" class="img-responsive img-thumbnail">
                  </div>
                  <div class="col-xs 12 col-sm-6  col-sm-6 col-md-6   ">
                    <img src="4.png" alt="" class="img-responsive img-thumbnail">
                  </div>
                </div>
              </div>
            </div>
            <br>
             SKILLZ:<br>
             HTML 5 - PRO <br>
             CSS 3 - PRO <br>
             JS - NOOB <br>
             JQUERY - NOOB<br>
             SASS - MAD <br>
             GRUNT - GOD
             <hr>
             <h2 id="contact">CONTACT</h2>
             <form class="form-horizontal">
              <fieldset>
                <!-- Form Name -->
                <!-- Text input-->
                <div class="form-group">
                  <label class="col-md-12 control-label" for=""></label>
                  <div class="col-md-12">
                    <input id="" name="" type="text" placeholder="name" class="form-control input-md">
                  </div>
                </div>
    
                <!-- Text input-->
                <div class="form-group">
                  <label class="col-md-12 control-label" for=""></label>
                  <div class="col-md-12">
                    <input id="" name="" type="text" placeholder="email" class="form-control input-md">
                  </div>
                </div>
    
                <!-- Textarea -->
                <div class="form-group">
                  <label class="col-md-12 control-label" for=""></label>
                  <div class="col-md-12">
                    <textarea class="form-control" id="" name="">message</textarea>
                  </div>
                </div>
    
                <!-- Button -->
                <div class="form-group">
                  <label class="col-md-12 control-label" for="singlebutton"></label>
                  <div class="col-md-12">
                    <button id="singlebutton" name="singlebutton" class="btn btn-default">send message</button>
                  </div>
                </div>
              </fieldset>
            </form>
            
            <img src="qrcode1.png" class="img-responsive center-block" alt="">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp eu fuglorem Lorem ipsuat nulla pariatur. Exceeu fugiat it in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui r sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    
    	      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>
Tags:

2

Answers


  1. 0

    To align your icons to the right, try: 

    .icons-sidebar-unit {
    float: right;
}

    Also, while looking at your code, I noticed you had a height / width set to 30px on your icon units. If this was to increase the size of the icons themselves, try: 

    .icons-sidebar-unit {
    font-size: 30px;
}

    A lot of people get confused on this one because it seems like icons should be styled like images, but they are actually styled as fonts.

    Login or Signup to reply.
  2. 0

    The easiest way is probably to absolutely position them .social-icons-sidebar { position: absolute; bottom: 0; right: 0; } https://jsbin.com/petixugodu/1/edit?html,css,output

    You could also use flexbox. Make the sidebar a column flex container, set the footer to flex-grow: 1 so that it extends to the bottom of the sidebar, put the social icons at the bottom by using margin-top: auto and order: 1 then align them to the right with text-align: right or align-self: flex-end https://jsbin.com/tukiqonase/edit?html,css,output

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

Back To Top
Search