Floating an Image to the Right of Bootstrap Tabs

In my Twitter Bootstrap nav-tabs, I have an image that follows all of my tabs, and I want it to float right. I've experimented with changing the float, text-align, and other properties, including using the pull-right class from another 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 CSS or Bootstrap class should I use to ensure the image floats to the right?

(This is for Bootstrap 4)

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

<nav class="navbar header navbar-light bg-dark" id="myHeader">
<div class="container">
<p class="">logo</p>
// Get all elements on the right side here
<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>

Answer №2

Enclose the image in a div tag and apply d-flex justify-content-end as shown:

<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>

This method has been tested and should be effective.

Alternatively, you can also try this:

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Move a secret bootstrap card in a sliding motion from the right to the left when a button is

I would like to add a bootstrap4 `card' that is initially hidden, and then display it with a slow slide animation from right to left when a button is clicked. Here is the code snippet: <div class="card" id="setup" style="display:none;"> <d ...

javascriptjqueryhtmltwitter-bootstrapanimation

Ways to restrict HTML styling to just the header section and avoid affecting the entire webpage

As a newcomer to HTML, please excuse my lack of knowledge. I am struggling to keep my current design at the top of my page, similar to a fixed header that follows the user down the page. Currently, the design takes over the entire page, obscuring the bod ...

javascripthtmljquerycss

Struggling with translating your jQuery function into JavaScript code?

I need assistance in converting my jQuery code to JavaScript for updating a product. I have the product info prefilling the update form and updating the product using jQuery, but I prefer to use JavaScript. Can you help me with converting the code? I am c ...

javascripthtml

I can't figure out what's not working with my full-width video cover

I'm having trouble creating a full-width video cover for the header of a website. Can someone help me troubleshoot what I'm doing wrong? Here is a snippet of my code: <section id="home"> <video poster="assets/img/home-bg.png" a ...

htmlcss

.js script not being rendered within the ng-view

I am facing an issue with my index.html file which contains ng-view. I have included the necessary .js files in the index.html, but these scripts are not being applied to the injected view. index.html <!DOCTYPE html> <html class="no-js css-menub ...

javascriptjqueryhtmlangularjsangularjs-view

Is there a "+" symbol positioned at the center of a div with a border-radius of 50%?

I need help centering a + symbol inside a div. It's displaying differently on iOS compared to Chrome, with the icon appearing lower in the div on iOS. Any suggestions for fixing this issue? Fiddle .addplus { border-radius: 50%; background-c ...

css

When applying multiple classes with NgClass, use the property name instead of the class content

I am facing a challenge trying to add multiple classes (in this case 2) to a custom component that includes a list item component from MDBootstrap: App.module.ts <custom-list-component size="w-50"> <custom-list-item-component href="#">lis ...

cssangularng-classmdbootstrap

Utilizing React Classes Based on Conditions

I'm attempting to add the class active if commentBadgeActive is true. The Scholar image should transition from grayscale to colored. <Paper className={classes.paper}> <div className={classes.profile}> < ...

cssreactjsmaterial-uireact-props

Tips for creating a vertical Angular Material slider with CSS

Attempting to modify the angular material directive to render vertically has been a challenge. I experimented with using transform:rotate in the CSS, however, it resulted in the slider behaving and rendering differently. md-slider { position: absolute ...

javascriptcssangularjshtmlangular-material

The BBCode seems to be malfunctioning

I created a custom BBCode for my PHP website to display tabbed content on a page. After testing the BBCode on a separate webpage and confirming there are no errors, I am facing an issue where the tabbed content is not showing up on the actual posting page. ...

phphtmlbbcode

The webpage does not dynamically adjust to fill the screen size when viewed on an iPhone 6 Plus

I am encountering an issue with a specific page which can be found at the following link: The webpage is not responsive, and the client's requirement is for the entire page to be visible on a mobile screen without the need for zooming in or out. Inst ...

htmlios8safariviewportiphone-6-plus

When hovering over elements, my li tags undergo a transformation

I am working on a simple menu code, which is just a list of items. ul li { position: relative; top: 55px; height: 30px; background: #212; display: inline-block; width: 29%; margin: 1%; margin-bottom: 0; padding: 5px; -webkit-border-t ...

htmlcsshoverhtml-lists

Issue encountered while trying to modify the color of a placeholder

Whenever I attempt to modify the placeholder's color: ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } : ...

htmlcsspseudo-elementpseudo-class

Swap the image source with a different image attribute when making the website responsive

I have implemented a custom attribute for the img tag in my code, such as data-tablet and data-mobil <div class="myDiv"> <img src="img-1.jpg" data-tablet="img-2.jpg" data-mobil="img-3.jpg"> </div> My goal is to have the image source c ...

javascriptjqueryhtmlcss

Safari is not properly handling element IDs when used in conjunction with React

I am currently in the process of building a straightforward single-page website utilizing React. At the top of the page, there is a navigation bar that contains links to various sections of the site: <li><a href="/#about">About u ...

javascripthtmlreactjssafarianchor

Is there a way to adjust the alignment of the placeholder text to the top of a sizable input field?

Here is how my code currently appears: https://i.sstatic.net/WwXd2.png I am trying to align the text at the top of the input text field. I have attempted using align-text-top, align-top, and creating a custom class with vertical-align: top; and vertical ...

htmlcssbootstrap-5

Display the definitions of entities within the titles of div elements

Within a React application, this block of HTML is present: <div className="my-class" title={myValue}> <div>{myValue}</div> </div> The value of myValue is MyCompany™. The inner div displays the content correctly. Ho ...

htmlreactjscharacter-set

Locate the class identifier within the source SCSS document that is condensed into a unified CSS file when rendered in the browser

In the application I'm working on, the index.html file uses app.css, which is generated from multiple SCSS files. When inspecting an element to find its corresponding CSS, is there a way to determine which SCSS file that style originated from? ...

htmlcssangularjssasssingle-page-application

What's the best way to align a bottom navigation bar in the center?

Hey there! I recently added a bottom navigation bar to my website using HTML and CSS code. However, I'm having trouble centering it at the bottom of the page. Any suggestions or solutions would be greatly appreciated. Attached are screenshots of the H ...

htmlcssnavbar

When bootstrap buttons are displayed inside a Vue component, there should be no spacing between them

Is this issue specific to the vue-loader or is it more related to webpack builds in general? Consider a basic HTML page with Bootstrap 4 loaded and two buttons added: <button type="button" class="btn btn-primary">Primary</button> <button t ...

cssvue.jswebpackbootstrap-4