How you can incorporate an icon in between menu items using Bootstrap 4

As a novice web developer, I am currently utilizing Bootstrap 4 in my project.

Here is the code snippet I have created:

.footer-menu a{
    color: #2D2D2D;
    font-size: 1em;
}

.copyright{
    color: #D1D1D1;
    font-size: 0.9em;
}


<footer>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="d-md-flex flex-row justify-content-between text-center text-md-left footer-menu">
                    <a href="#" class="d-block"><img src='my logo.jpg'></a>
                    <a href="#" class="d-block">Oferta</a>
                    <a href="#" class="d-block">O nas</a>
                    <a href="#" class="d-block">Kontakt</a>
                    <a href="#" class="d-block">Cennik</a>
                    <a href="#" class="d-block">Referencje</a>
                    <a href="#" class="d-block">Aktualności</a>
                </div>
            </div>
        </div>
    </div>

While this setup is functional, I am now looking to enhance it by adding icons between my menu items (such as oferta, o nas, kontakt, cennik, referencje, aktualnośći): https://ibb.co/7RZmSsz (red round).

What would be the best approach to achieve this?

csstwitter-bootstrapbootstrap-4

Answer №1

If you want to achieve this effect, one way is to insert a dot div between each item in the following manner:

.footer-menu a{
    color: #2D2D2D;
    font-size: 1em;
}

.copyright{
    color: #D1D1D1;
    font-size: 0.9em;
}



.dot:before {
  content: "\25CF";
  color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<footer>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="d-md-flex flex-row justify-content-between text-center text-md-left footer-menu">
                    <a href="#" class="d-block"><img src='my logo.jpg'></a>
                    <a href="#" class="dot"></a>
                    <a href="#" class="d-block">Oferta</a>
                    <a href="#" class="dot"></a>
                    <a href="#" class="d-block">O nas</a>
                    <a href="#" class="dot"></a>
                    <a href="#" class="d-block">Kontakt</a>
                    <a href="#" class="dot"></a>
                    <a href="#" class="d-block">Cennik</a>
                    <a href="#" class="dot"></a>
                    <a href="#" class="d-block">Referencje</a>
                    <a href="#" class="dot"></a>
                    <a href="#" class="d-block">Aktualności</a>
                </div>
            </div>
        </div>
        </div>
</footer>

Alternatively, you can simplify the process by adding the dot directly before each .d-block element in the CSS like this:

.d-block:before {
  content: "\25CF";
  color: red;
  padding-right: 1em;
}

However, it's worth noting that the first method will ensure the dot is consistently spaced between the menu items.

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

Changing a p element to a div and adding a class in Bootstrap 4.5

To maintain consistency, I prefer using <div class='something'>BIO</div> over <p>BIO</p>. In Bootstrap 4.5, is there a similar class that achieves the same result? I'm not very skilled in CSS, so please forgive me i ...

csstwitter-bootstrapbootstrap-4

CSS creates gaps between each of the internal elements inside the HTML document

I'm looking to create a 4px space between all internal components within my HTML, regardless of direction (top, bottom, left, or right). I have attempted to achieve this by using an external CSS file with the following code: body { padding: 2p ...

htmlcss

Angular directive for concealing the 'ancestor' of an element

I have created a code snippet that effectively hides the 'grandparent' element of any '404' images on my webpage. Here is the code: function hideGrandparent(image){ image.parentNode.parentNode.style.display = 'none'; } < ...

javascripthtmlcssangularjsangularjs-directive

Execute function upon initial user interaction (click for desktop users / tap for mobile users) with the Document Object Model (DOM)

Looking to trigger a function only on the initial interaction with the DOM. Are there any vanilla JavaScript options available? I've brainstormed this approach. Is it on track? window.addEventListener("click", function onFirstTouch() { console.l ...

javascriptjqueryhtmlcss

Tips for arranging Angular Material cards in columns instead of rows

I am currently developing a web application using Angular, and I've encountered an issue while trying to display cards in a vertical layout rather than horizontally. My goal is to have the cards fill up the first column (5-6 cards) before moving on to ...

htmlcssangularangular-material

Align three divs with three columns in the horizontal center

I am facing a challenge where I need to perfectly center 3 col3 divs in a row. Despite the calculation showing 1.5, I am unsure of the proper method to overcome this hurdle. <div class="row"> <div class="col-md-offset-2 col-md-3" style="height: ...

htmlcsstwitter-bootstrap

What techniques can be used to ensure an element remains visible within the viewport

I am currently working with an HTML element that is displayed when a button is clicked, similar to a popup. My goal is to determine if the element is within the browser's viewport and then position it accordingly inside the viewport. Is there a proper ...

javascripthtmlcss

issue with accessing the code through the web browser

Currently, I am developing a web application using ASP.NET MVC5. I have been coding and pushing my work to GitHub. However, I recently encountered an issue where I can no longer view my application on the browser. The "View in browser" option has disappear ...

c#htmlcssvisual-studiogithub

Blurred background images following the upgrade to Internet Explorer 11

This morning, I received an automatic update to IE 11 and noticed that some of my background images appeared blurry. After confirming that the images were not the issue, I opened Chrome and saw that they were crisp again. This left me completely puzzled. ...

cssbackground-imageinternet-explorer-11

Content in the Bootstrap carousel is not displaying properly within the arrow indicators

While working on my project and trying to implement a carousel element, I encountered an issue. The carousel arrows and autoplay options are functional, but the content does not appear between the arrows as expected. First, I included bootstrap in my proj ...

htmltwitter-bootstrapfrontendbootstrap-5

Is there a way to make a glossy `selectInput()` extend beyond a `bslib::navset_card_pill()`?

The dilemma: My issue is that the selectInput() in my code gets cut off by the lower border of the card: library(shiny) # Version 1.7.4 library(bslib) # Version 0.5.0 ui <- page_fluid( navset_card_pill(nav_panel( title = "No overflow :(&quo ...

htmlcssrshinybslib

Ensure that the footer remains at the bottom of the page without being fixed to the bottom

I am currently working on configuring the footer placement on pages of my website that contain the main body content class ".interior-health-main". My goal is to have a sticky footer positioned at the very bottom of these pages in order to eliminate any wh ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Align the parent div center and have both dynamic and fixed width child divs inside

In the main parent div, there is a combination of my logo and navigation bar. The logo has a fixed width while the dynamic-width navigation bar is positioned 100px to the right of the logo. However, the current layout places them on the left side of the s ...

htmlcssdynamicwidthcenter

Tables inserted via ckeditor do not preserve the style attribute

After incorporating ckeditor into my web page along with the table plugin, I noticed that sometimes the width of tables created in the editor window extends beyond the boundaries of the webpage when displayed. To address this issue, I made some adjustments ...

javascriptcsshtml-tableckeditor

How to Extract Minutes in Datatables Timestamps and Apply Custom Styling

Working with Datatables v1.10 Right now, my table is showing a date in the second column in the format 17-04-2019 14:34, which is how it's stored in the database. The filtering and searching functionality are all working as expected. The current HTM ...

javascriptjqueryhtmlcssdatatable

Align two separate unordered lists together in the center

Would it be possible to align two separate UL elements next to each other horizontally? Here is the code that I am currently working with: <div id="container"> <ul id="list1"> <li></li> <li></li> ...

htmlcsshtml-listscentering

Various Mobile Devices Display Website in Unique Ways

I've been having trouble getting my website to display consistently across different phones and could use some assistance. You can view the site at www.fpphotos.store. I have set overflow-x:auto; for the table containing the images, with CSS styles de ...

htmlcss

Leveraging jQuery for vertical alignment of an image

I am trying to vertically center an image with the class .personal within a container with the class .personal-row (located inside .row-main) on page load and when resizing. Initially, I attempted using vertical-align: middle;, but that did not yield the d ...

jquerycss

CSS: Including an item in a list causes the <div> to expand upwards on the page instead of stretching downwards

I’m currently facing an issue with my list where, upon reaching a certain number of items (in this case 5), the list starts moving up the page instead of extending downwards as expected. I suspect that this problem is related to my use of CSS grid-templa ...

htmlcssreactjs

Center align the list items on mobile using flex in bootstrap 4

At the top of my page, I have a div called header_full_width. This div spans 100% of the width of the page. Within this div, there is a container, a row, a col-md-12 div, and an unordered list with list items and links. My issue is that on mobile devices, ...

htmlcsstwitter-bootstrapbootstrap-4anchor