Photoshop Question posted in
The official user guide can be found here.

Position icon inside label element to right using Bootstrap 4 – Photoshop

I’m trying to do this with the icon that is inside a label element.

Photoshopped:

enter image description here

What I am getting:

enter image description here

This is the code for that section

<div class="form-group col-6 m-0">
    <label class="my-1 mr-2" for="role"><i class="fas fa-tag"></i> ROLE <span class="ml-auto"><i class="fas fa-question-circle"></i></span></label>
    <select class="custom-select my-1 mr-sm-2 form-control r-0 light s-12" id="role">
        <option value="1">Administrator</option>
    </select>
</div>

In this span element <span class="ml-auto"><i class="fas fa-question-circle"></i></span>
I have tried:

.ml-auto
.text-right
.d-flex .justify-content-end
.float-right
.pull-right

But none of those seem to work.

How can I get the i element to float to the right as depicted in the photoshopped image?

Tags:

3

Answers


  1. 0

    Try and use the pull-right class

    Login or Signup to reply.
  2. 0

    Add d-flex & align-items-center classes to the <label>, at which point .ml-auto will work:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">

<div class="form-group col-6 m-0">
    <label class="my-1 d-flex align-items-center" for="role"><i class="fas fa-tag mr-2"></i> ROLE <span class="ml-auto"><i class="fas fa-question-circle"></i></span></label>
    <select class="custom-select my-1 mr-sm-2 form-control r-0 light s-12" id="role">
        <option value="1">Administrator</option>
    </select>
</div>
    Login or Signup to reply.
  3. 0

    Add d-flex and align-items-center classes on label

    <div class="form-group col-6 m-0">
                <label class="my-1 d-flex align-items-center" for="role"><i class="fas fa-tag"></i> ROLE <span class="ml-auto"><i class="fas fa-question-circle"></i></span></label>
                <select class="custom-select my-1 mr-sm-2 form-control r-0 light s-12" id="role">
                    <option value="1">Administrator</option>
                </select>
            </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search