show items in UL LI elements as "inline" within a bootstrap column

Struggling with organizing UL LI items in a bootstrap setup? Trying to make them align horizontally instead of vertically but can't figure it out. Here's my code:

<div class="container-fluid" style="margin-bottom:45px;">
        <div class="row text-center">
            <div class="col-lg-12">
                <h4 class="text-center">FOLLOW US</h4>
                <hr style="width:60%">
            </div>
        </div>
        <div class="row ">
            <div class="col-lg-12 d-flex justify-content-around" id="socialMedia">
                <ul style="list-style:none;">
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                    <li><a href="#"><i class="fab fa-yelp"></i></a></li>
                </ul>
            </div>
        </div>
    </div>

Tried CSS like Float:left and display:inline on #socialMedia, but couldn't get them aligned horizontally. They are currently centered, which is how I want them.

Any suggestions?

htmlcssbootstrap-4

Answer №1

To implement the d-inline class...

<ul class="list-unstyled">
    <li class="d-inline"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
    <li class="d-inline"><a href="#"><i class="fab fa-instagram"></i></a></li>
    <li class="d-inline"><a href="#"><i class="fab fa-yelp"></i></a></li>
</ul>

Visit this link for more information.

Answer №2

It was mentioned that the float property should be applied to #socialMedia, however, this should actually be applied to the li elements within it. To correct this, add float: left to #socialMedia li.

If this adjustment does not yield the desired result, ensure that your CSS rules have enough specificity to override any conflicting Bootstrap styles. As a last resort, consider using the !important declaration for added emphasis.

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

A guide on showcasing the compilation results of PHP code directly on the web browser

How can I compile PHP code on an HTML Button click and display the compilation output in a browser? The code snippet below works well in the terminal but doesn't show anything in the browser. I am currently using XAMPP server on a Windows machine. &l ...

phphtmlxampp

"Can anyone provide guidance on how to initiate a css 3d animation by clicking a button

Currently, I am developing a folding hide/show animation that can be triggered using Javascript. If you would like to take a look at the code and see a working example, please visit this link: You can also view just the gist here: https://gist.github.com ...

javascriptjquerycssanimationwebkit

Interactive hover effect in JavaScript displays a larger version of other thumbnails when hovering over a dynamically loaded thumbnail image, instead of its own full-size image

I recently began teaching myself PHP and Dreamweaver with the help of a video tutorial on building data-driven websites using Dreamweaver. My goal is to create a dynamic table with 6 columns and 20 rows. column1 | column2 | column3 | colu ...

phphtmlcssjavascriptmysql

Utilizing graphics within the Atom text editor

Hey, I have a bit of a silly question. I can't seem to figure out why these images aren't showing up on my Atom editor. Can anyone help me with this? <body> <div class="top-container"> <img src="images/clou ...

htmlcssimageatom-editor

The issue of JavaScript failing to connect to the HTML file

As I work on my basic HTML file to learn Javascript, I believed that the script was correctly written and placed. Nevertheless, upon loading the file in a browser, none of the script seems to be functioning. All of my javascript code is external. The follo ...

javascriptjqueryhtml

Designing a multi-platform web browser application for Android, iOS, and Windows 10

I've developed several web applications using HTML5 technology and now I'm interested in creating my own custom web browser specifically tailored for my apps/sites. I want it to have a native appearance, but essentially just wrap around my web ap ...

androidioshtmlgoogle-chromebrowser

What are some strategies for disregarding global CSS styles?

I am facing an issue on my html page with a specific div structure. The <div id="container">/* lots of nested html with elements like div, ul, li etc */</div> is causing some trouble in my global css file called style.css. The style. ...

htmlcss

Guide to utilizing a download link for file retrieval in Python

I'm currently working on creating a script that can automatically download specific files from webpages and save them to designated folders. For the most part, I've been successful in achieving this using Python, Selenium, and FirefoxPreferences ...

htmlpython-2.7selenium-webdriverdownload

Extracting Job Titles from LinkedIn Profiles

Currently, my code is designed to search for job titles on LinkedIn (e.g. Cyber Analyst) and gather all the links related to these job postings/pages. The goal of the code is to compile these links into a list and then iterate through them to print out th ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

JavaScript function to substitute instead of writing

function replaceHTML(a,b) { var x = document.getElementById("canvas_html").contentDocument; x.innerHTML = b; } Although the current function works fine, I would like to update it to directly replace the existing content instead of writing new con ...

javascripthtml

What is the best way to place content in a single div without it being divided into several separate boxes

Here is my code snippet: <div class="col-md-9"> <div id="statbox"> {% for obj in product_type %} {% for obj1 in vastu %} <script type="text/javascript"&g ...

javascripthtmlcssdjango

What is the appropriate conversion for a CSS property name starting with -webkit when working with React?

For example, using `-webkit-text-fill-color` resulted in an error when setting it to `'red'`, stating "Using kebab-case for CSS properties in objects is not supported. Did you mean WebkitTextFillColor?" I have attempted `WebkitTextFillColor`, `w ...

cssreactjswebkitkebab-case

Count the amount of exposed items in each row within a specific container size and dimensions

I created a code sample available at demo code to showcase li elements within a ul displayed in a flow-like manner with the use of display:inline. The challenge I am facing is determining the number of complete li items that are not wrapping for each row ...

jqueryhtmlcss

Is there a way to incorporate CSS into an element utilizing jQuery when only a class is available for identification, and when the time in the innerHTML is within a 5-minute range from the current time?

I have some HTML code that I need help with: <td class="mw-enhanced-rc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;18:10&nbsp;</td> My goal is to use JavaScript to make the time bold. $('td[class^="mw-enhanced-rc"]').eac ...

javascriptjqueryhtmlmediawiki

Looping CSS text animation with typing effect

I am struggling with a CSS code that types out text, but it only does so once and I need it to repeat infinitely. Despite adding animation-iteration-count: infinite;, it still doesn't work as intended. Another issue is that it slows down at the end. H ...

htmlcssanimation

Resolving Issues in HTML and the Dynamic Duo of PHP and MySQL

Hey there, I've been a reader for a while now but this is my first time posting. I'm really into PHP and I've been working on a page lately. Right now, I've got the DB connection set up nicely and my SELECT statement is doing exactly wh ...

phphtmlmysqlformspost

Wrap the text within the contenteditable div with the <p> tag

By utilizing the code snippet below, I have managed to input text into a contenteditable div and instead of generating a new div on pressing the enter key, it generates <br> tags. Is there a way to enclose the text inside the contentedtiable div wit ...

jqueryhtmlcontenteditable

Steps for inserting new text in front of an element's existing text

Is there a way to insert text before the original content of an element? I know how to add text after using createTextNode, as shown in this example: $("#button").click(function() { $( ".text" ).append( document.createTextNode( " Hello" ) ); }); < ...

javascriptjqueryhtml

Angular4 - Div with ngIf doesn't respond to click event

I'm attempting to add a click event to a specific div. Within this div, there is another div that is dynamically generated based on a Boolean condition that I receive as input. Unfortunately, in this case, the click event is only functioning when clic ...

htmlcssangular

What is the best way to apply fill to SVG using Tailwind CSS?

I tried using the code provided, but unfortunately, I was unable to Override the fill. The issue seems to have been resolved, but can someone help me achieve this using tailwind CSS? <div className=""> <svg className="text- ...

cssnext.jstailwind-csstailwind-in-js