Bootstrap Tabs Float Image Right-Twitter bootstrap

Justin
June 2, 2020
83 views
0 votes
2 Answers

I’ve got a basic nav-tabs in Twitter Bootstrap and I’ve got an image after all of my tabs, that I’d like to float right. I’ve tried modifying its float, text-align, and other attributes, and even the pull-right class as mentioned on a separate but related SO question.

<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
    <a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab" aria-controls="stuff" aria-selected="true">Stuff</a>
</li>
<!-- ... -->

<img class="pull-right text-right float-right" src="myimg.png" width="32px" height="32px">

What Bootstrap class or CSS should I write to make my image float to the right?

(Bootstrap 4 if that matters)

Answers

<nav class="navbar header navbar-light bg-dark" id="myHeader">
<div class="container">
<p class="">logo</p>
// from here you get all elements on right side
<ul class="list-inline">
<li class="list-inline-item">
<div class="frqst">
<button class="fas fa-users btn text-white"></button>
<div>
<ul class="list-group">
<li class="border-bottom">
<p>first right item
</p>                   
</li>
</ul>
</div>
</div>
</li>
<li class="list-inline-item">
<button class="fas fa-comment btn text-white">second right item</button>
</li>
<li class="list-inline-item">
<p>third right item</p> 
</li>
<li class="list-inline-item"> 
<img src="../../myimg.jpg">
</li>
<li class="list-inline-item">
<a class="text-white" href="./models/logout.html">Logout</a>
</li>
</ul>
</div>
</nav>

Put a div tag around the image and use d-flex justify-content-end like this:

<div class="row">
    <div class="col-md-12">
        <div class="">
            <div class="">
                <ul class="nav nav-pills w-100">
                    <li class="nav-item">
                        <a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab"
                            aria-controls="stuff" aria-selected="true">Stuff</a>
                    </li>
                </ul>
            </div>
            <div class="d-flex justify-content-end">
                <img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/09/f46bc1a6-9ffa-4434-a77a-ea1491d3597a-760x400.jpeg"
                    class="">
            </div>
        </div>
    </div>
</div>

I tested this. Should work.

Another you can try:

<div class="col-md-12" style="border-top: 2px solid #000;">
    <div class="mx-4">
        <div class="footer pt-3">
            <div class="row">
                <div class="col-md-6">
                    <ul>
                        <li class="nav-item">
                            <a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab" aria-controls="stuff"
                                aria-selected="true">Stuff</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <div class="float-right">
                        <img class="pull-right text-right float-right" src="http://placekitten.com/301/301" width="32px" height="32px">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.