Text on Left, Icon on Right - Bootstrap

Question

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>

Harshil Modi · Accepted Answer · 2022-04-06 00:34:46Z

3

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>

edited Apr 6, 2022 at 0:34

Harshil Modi

4363 gold badges10 silver badges21 bronze badges

answered Dec 11, 2018 at 7:49

Itay Gal

10.8k6 gold badges43 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

michaelmcgurk Over a year ago

Fantastic - this worked perfectly. Thank you so much.

connexo Over a year ago

I wouldn't recommend applying these changes to button in general (even less so since you're also using !important) , and changing what an actual Bootstrap class does (.push-right). This will have tons of unwanted side effects in any project with more than one developer working on it. Instead, create your own CSS class and use that for the necessary changes.

michaelmcgurk Over a year ago

@connexo That's good advice. I'll be careful how I roll this snippet out. Thank you.

Carol Skelly Over a year ago

Content shouldn't be placed directly in row... "Content should be placed within columns, and only columns may be immediate children of rows."

Itay Gal Over a year ago

Thanks guys, indeed it was quick and dirty.

|

connexo · Accepted Answer · 2018-12-11 07:51:16Z

3

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>

answered Dec 11, 2018 at 7:51

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Comments

arxoft · Accepted Answer · 2018-12-11 07:50:12Z

1

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>

answered Dec 11, 2018 at 7:50

arxoft

1,4854 gold badges20 silver badges36 bronze badges

Comments

Shiv Kumar Baghel · Accepted Answer · 2018-12-11 08:01:31Z

1

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>

edited Dec 11, 2018 at 8:01

answered Dec 11, 2018 at 7:56

Shiv Kumar Baghel

2,4906 gold badges20 silver badges36 bronze badges

Comments

DARKVIDE · Accepted Answer · 2021-10-05 13:23:59Z

1

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>

edited Oct 5, 2021 at 13:23

answered Oct 5, 2021 at 11:56

DARKVIDE

12611 bronze badges

Collectives™ on Stack Overflow

Text on Left, Icon on Right - Bootstrap

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related