CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
user-44651
user-44651

Reputation: 4124

Position icon inside label element to right using Bootstrap 4

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?

Upvotes: 0

Views: 3450

Answers (3)

Lekh Raj
Lekh Raj

Reputation: 80

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>

Upvotes: 0

tao
tao

Reputation: 90068

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>

Upvotes: 1

Carosihno
Carosihno

Reputation: 22

Try and use the pull-right class

Upvotes: 0

Related Questions