• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2346
  • Last Modified:

how to align text below an icon -- bootstrap and css

Hello,
  I have fix footer on my page and would like the text of the action to be position below the bootstrap icon. Not sure how to  do it. I added a br tag but the text moves out of the visible area

here is my code

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
   
    <style>
       .rfooter
          {
          	height:5em;
          	text-align:center;
            color: white;
            background-color:green;
            font-size:1.5em;
           
          
          
          }
           .footerSeachButton
           {
           	  background:grey;
           	  color:white;
            	text-align:center;
            	height: 5em;
            	vertical-align:middle;
            	line-height:5em;
            
              
           }
          .footerLoginButton
           {
            	background:yellow;
            	color:white;
            	text-align:center;
            	 height: 5em;
            	 vertical-align:middle;
            	 line-height:5em;
            
           }
      
    </style>
  </head>

  <body>
  
<footer class="navbar-fixed-bottom rfooter">
  <div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-6 footerSeachButton ">
         <span class="glyphicon glyphicon-user" aria-hidden="true">User</span>
        </div>
        <div class="col-xs-6 col-md-6 footerLoginButton ">
          <span class="glyphicon glyphicon-zoom-in" aria-hidden="true">Find</span>
        </div>
      </div>
    </div>
</footer>
</body>

</html>

Open in new window

Capture.PNG

Here is an image .. I would like the text to be under the icon..

link to plunk..http://plnkr.co/edit/xb1HLIhSfVZzEe2p7bT0?p=preview

Thanks for the help
0
chand pb
Asked:
chand pb
  • 3
  • 2
2 Solutions
 
tailoreddigitalCommented:
Add a <br> tag, It seems to do the job,
BR
<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
   
    <style>
       .rfooter
          {
                height:5em;
                text-align:center;
            color: white;
            background-color:green;
            font-size:1.5em;
           
         
         
          }
           .footerSeachButton
           {
                   background:grey;
                   color:white;
                  text-align:center;
                  height: 5em;
                  vertical-align:middle;
                  line-height:5em;
           
             
           }
          .footerLoginButton
           {
                  background:yellow;
                  color:white;
                  text-align:center;
                   height: 5em;
                   vertical-align:middle;
                   line-height:5em;
           
           }
     
    </style>
  </head>

  <body>
 
<footer class="navbar-fixed-bottom rfooter">
  <div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-6 footerSeachButton ">
         <span class="glyphicon glyphicon-user" aria-hidden="true"><br>User</span>
        </div>
        <div class="col-xs-6 col-md-6 footerLoginButton ">
          <span class="glyphicon glyphicon-zoom-in" aria-hidden="true"><br>Find</span>
        </div>
      </div>
    </div>
</footer>
</body>

</html>
0
 
chand pbAuthor Commented:
Thanks you..
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The icon is just a background.  Make 2 spans or 2 div's.  If spans set to display:Block  http://plnkr.co/edit/xb1HLIhSfVZzEe2p7bT0?p=preview

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
   
    <style>
       .rfooter
          {
          	height:5em;
          	text-align:center;
            color: white;
            background-color:green;
            font-size:1.5em;
           
          
          
          }
           .footerSeachButton
           {
           	  background:grey;
           	  color:white;
            	text-align:center;
            	height: 5em;
            	vertical-align:middle;
            	line-height:5em;
            
            
              
           }
           .footerSeachButton span{
               display:block;
               height:20px;
               
           }
          span.footericon{
            line-height:4;
            
          }
          .footerLoginButton
           {
            	background:yellow;
            	color:white;
            	text-align:center;
            	 height: 5em;
            	 vertical-align:middle;
            	 line-height:5em;
            
           }
      
    </style>
  </head>

  <body>
    <div class="container">
       <div class="row">
         <button class="col-xs-6 col-md-6 footerSeachButton ">
            <i class="glyphicon glyphicon-user" style="font-size:30px; vertical-align: middle;"></i>
            <div style="color:green">Continue</div>
          </button>
       </div>
     

      
      
    </div>
    
   
  
<footer class="navbar-fixed-bottom rfooter">
  <div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-6 footerSeachButton">
          
         <span class="glyphicon glyphicon-user footericon" aria-hidden="true"></span>
         <span class="">User</span>
         
        </div>
        <div class="col-xs-6 col-md-6 footerLoginButton ">
          <span class="glyphicon glyphicon-zoom-in" aria-hidden="true">Find</span>
        </div>
      </div>
    </div>
</footer>
</body>

</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
chand pbAuthor Commented:
Thanks scott..


I had already accepted the first answer but your solution is the one I will use.. Not sure how to give you points ...

Will send the admin an email
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Just click the request attention link under the question.  

Thank you for recognizing this answer.
0
 
chand pbAuthor Commented:
Thanks for the solution .. sorry tailoreddigital for taking away point but I am not able to assign more than 500 points.

Thanks scott and tailoreddigital for answering my question
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now