CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
michaelmcgurk
michaelmcgurk

Reputation: 6523

Text on Left, Icon on Right - Bootstrap

How do I position the icon to the far right and keep the text on the left with Bootstrap.

Here's my effort so far: https://www.bootply.com/5E2CGFEWdx

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <button class="btn btn-lg btn-success col-xs-12"> Call Us <span class="glyphicon glyphicon-earphone push-right"></span></button>
  </div>
</div>

Upvotes: 1

Views: 12155

Answers (5)

Itay Gal
Itay Gal

Reputation: 10824

You can use float: right to make your image stick to the right, and set the text-align: left so the text will start at the left end.

Example here

align-left {
  text-align: left;
}

.push-right {
  float: right;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <button class="btn btn-lg btn-success col-xs-12 align-left"> Call Us <span class="glyphicon glyphicon-earphone push-right"></span></button>
  </div>
</div>

Upvotes: 3

DARKVIDE
DARKVIDE

Reputation: 126

In bootstrap 4 just need to use default float-right and text-left css classes like following:

<button type="button" class="btn text-left"> 
<span class="float-right"><i class="fas fa-question"></i></span> ClickMe &nbsp;
</button>

Upvotes: 1

Shiv Kumar Baghel
Shiv Kumar Baghel

Reputation: 2490

use pull-left, pull-right utility classes

<html>
<head>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

</head>
<body>

<div class="container">
  <div class="row">
    <button class="btn btn-lg btn-success col-xs-12">
      <span class="pull-left">Call Us</span>
      <i class="glyphicon glyphicon-earphone pull-right"></i>
    </button>
  </div>
</div>

</body>
</html>

Upvotes: 1

connexo
connexo

Reputation: 56843

You can reposition the span holding the icon and make it float: right;:

.container {
  margin-top: 25px;
}

.call-us {
  text-align: left !important;
}

.call-us span {
  float: right;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <button class="btn btn-lg btn-success col-xs-12 call-us"><span class="glyphicon glyphicon-earphone"></span>Call Us</button>
  </div>
</div>

Upvotes: 3

arxoft
arxoft

Reputation: 1475

Try following

<style>
button {text-align:left}
</style>

<div class="container">
  <div class="row">
    <button class="btn btn-lg btn-success col-xs-12"> Call Us <span class="glyphicon glyphicon-earphone pull-right"></span></button>
  </div>
</div>

Upvotes: 1

Related Questions