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, these links are not centered and extend beyond the page, causing a horizontal scrollbar to appear.

I have attempted to use the classes align-items-center and other HTML code to center the links, but have been unsuccessful.

<div class="header_full_width">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <ul class="header_links_ul header_links_ul_left d-flex justify-content-center justify-content-md-start">
                    <li><a href="https://kemenyem.hu/" class="header_top_links" title="Home page">Home page</a></li>
                    <li><a href="https://kemenyem.hu/informaciok" class="header_top_links" title="Information">Information</a></li>
                    <li><a href="https://kemenyem.hu/aktualis-akciok" class="header_top_links" title="Current promotions">Current promotions</a></li>
                    <li><a href="https://kemenyem.hu/kiemelt-termekek" class="header_top_links" title="Featured products">Featured products</a></li>
                    <li><a href="https://kemenyem.hu/hirek" class="header_top_links" title="News and interesting facts">News, interesting facts</a></li>
                    <li><a href="https://kemenyem.hu/elerhetosegek" class="header_top_links" title="Contact information">Contact information</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

On mobile devices, I would like these links to be vertically and horizontally centered, stacked on top of each other.

https://i.sstatic.net/Bikxq.png

https://i.sstatic.net/RsNeN.png

Link to the demo website: kemenyem.hu

htmlcsstwitter-bootstrapbootstrap-4anchor

Answer №1

The issue lies in applying d-flex to all media sizes.

  • Apply d-flex to media sizes larger than xs (mobile) using d-sm-flex
  • Set the ul to d-inline-block on xs using d-xs-inline-block

Following these changes, it should function as desired:

<div class="header_full_width">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <ul class="header_links_ul header_links_ul_left d-sm-flex d-xs-inline-block justify-content-md-start">
                    <li><a href="https://kemenyem.hu/" class="header_top_links" title="Kezdőlap">Kezdőlap</a></li>
                    <li><a href="https://kemenyem.hu/informaciok" class="header_top_links" title="Információk">Információk</a></li>
                    <li><a href="https://kemenyem.hu/aktualis-akciok" class="header_top_links" title="Aktuális akciók">Aktuális akciók</a></li>
                    <li><a href="https://kemenyem.hu/kiemelt-termekek" class="header_top_links" title="Kiemelt termékek">Kiemelt termékek</a></li>
                    <li><a href="https://kemenyem.hu/hirek" class="header_top_links" title="Hírek, érdekességek">Hírek, érdekességek</a></li>
                    <li><a href="https://kemenyem.hu/elerhetosegek" class="header_top_links" title="Elérhetőségek">Elérhetőségek</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
  • For centering on sm as well, use d-xs-inline-block and d-md-flex

For more information, refer to Bootstrap's documentation on display utility classes and responsive breakpoints.

Answer №2

It appears that you may be searching for the usage of flex-column. Here is an example to try:

<ul class="header_links_ul header_links_ul_left d-flex justify-content-center flex-column flex-md-row align-items-center justify-content-md-start">

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

Making modifications to the CSS within an embedded iframe webpage

Assigned with the task of implementing a specific method on a SharePoint 2013 site. Let's dive in. Situation: - Within a page on a SharePoint 2013 site, there is a "content editor" web part that displays a page from the same domain/site collection. T ...

javascriptjqueryhtmlcssiframe

Master the art of manipulating tags in Django templates using JavaScript

In my Django quiz app, there are two main components. The first part involves displaying 10 sentences with corresponding audio to help with memorization, one per page. The second part consists of asking questions based on the same set of sentences. I initi ...

javascriptpythonhtmldjango

Looking to retrieve the <td> element using the class name?

When a specific condition is met in the class name, I want to apply styles to an entire row. The table structure I am working with is as follows: <table> <tbody> <tr> <td><div><span class='level2'></span&g ...

htmlhtml-table

Different options for determining network connectivity on a website

Seeking Network and Location Information on ASP.Net Core MVC Web Application After some investigation, I came across the Navigator API online. For acquiring location data, it functions flawlessly. navigator.geolocation.getCurrentPosition(function (posi ...

javascriptasp.net-mvchtmlasp.net-core-2.0

Ways to develop a dynamic HTML TransferBox featuring a custom attribute

I am in need of developing a customized transferbox using HTML, JavaScript, and JQuery. The user should be able to select from a list of options and associate them with attributes. This selection process should involve transferring the selected options be ...

javascriptjqueryhtml

Resetting initial values with Velocity.js post-animation

After animating elements into view on a page, I want to defer further animation through CSS classes. However, Velocity keeps all animated properties in the style= tag, hindering CSS transitions. My solution involves resetting the CSS upon completion, but ...

javascriptjquerycssanimationvelocity.js

Limit the precision of decimal number output to a specific value

I need assistance with achieving the output 999999.35 in angular or javascript combined with html. I am looking to restrict the number of 9's to a maximum of 6 digits before the decimal point, and after 6 digits it should not accept any more digits. A ...

javascriptjqueryangularjshtml

What is the best way to assign a Python variable to an <a-assets> element?

There exists a Python function that provides the chosen background <a-sky ID="sky" color="{{object.background}}"></a-sky> The backgrounds can be in the format of '#c6aa99', '#e1a600', '#290942', 'star' ...

pythonhtmlaframe

Ways to choose a distant relative in XML using XPath

To target all direct <p>...</p> elements inside a div, the selector would be div/p If I wish to select all second-level nested <p>...</p> tags within a div, I could use div/*/p Can a specific range be specified instead? div/descen ...

htmlseleniumxpath

Title of Flickr API

Hey everyone, I'm working on setting up a gallery on my website using images and sets from Flickr. I've successfully loaded all the sets with the following code: $flickr = simplexml_load_file('http://api.flickr.com/services/rest/?method=fli ...

phphtmlxmlapiflickr

Is there a way to add a disappearing large space that vanishes when a line break occurs?

I am currently working on a website where I aim to have the name and airport code displayed in a centered title above an image of the airport. https://i.sstatic.net/Vwi2V.png The name and code will be separated by an em space: div.terminal-silhouette- ...

htmlcss

website with a horizontal scroll-bar

Looking to create a horizontal scrolling website where the divs float to the right without specifying the container's width, as it may vary on different pages. Any suggestions? ...

htmlcss

Experiencing a bug where Bootstrap is causing a white screen to appear instead of rendering the page properly

I'm currently grappling with getting bootstrap to function properly in Node.js using the Jade template engine. Whenever I attempt to execute the index.jade file, all I get is a blank white page. div.topbar div.fill div.container a.brand( ...

node.jstwitter-bootstrapexpresspug

When an error message is displayed in the textField, the Material UI button shifts downward

I have incorporated the material UI error message display into my text field. When I click on the button without entering any text in the field, an error message pops up which pushes down the button. I am looking for a way to prevent this behavior but have ...

cssreactjsmaterial-ui

Incorporate Unicode characters into the structure of an HTML tag

I'm having an issue with the C# script below that is supposed to remove HTML tags from a description column in SSIS. I attempted to include the unicode value &#58 in the htmlTagPattern string, but it's not working as expected. Any help would ...

c#htmlsql-serverssisetl

Ways to emphasize the index navigation link when on the main page

Currently, there is a web design project that I am tackling and have encountered a slight hiccup that needs resolving. The issue revolves around highlighting different navigation links based on the URL of the current page. This functionality works seamless ...

javascriptjqueryhtmlcssnav

What is the best way to use CSS in ReactJS to insert an image into a specific area or shape?

Currently, I'm working on developing a team picker tool specifically for Overwatch. The layout consists of cards arranged horizontally on a website, all appearing as blank gray placeholders. These cards are positioned using the JSX code snippet shown ...

javascripthtmlcssreactjs

Hide custom video controls from view

For a while, I was able to hide the controls on my page using position:absolute; and bottom:-36px, which made them pop up when hovering over the player. Recently, however, I noticed that I can now scroll down to see them. How can I maintain the slide-up ef ...

htmlcss

What is the best way to showcase two data frames side by side in an HTML template or webpage without using frames?

Is there a way to showcase two data frames side by side in an html template? <h3> TITLE </h3> {{stat1 | safe}}. {{stat | safe}} I attempted the above solution, but unfortunately it only displays the data frames vertically stacked instead of ...

pythonhtmlpython-3.xflaskjinja2

Setting the height of the Bootstrap Navbar to accommodate the logo

I've designed a navigation bar with a logo, but the placement of the logo is not right (refer to the image). I am aware of how to resize the image to fit within the navbar, however, I intend to adjust the height of the navigation bar to align with the ...

htmlcsstwitter-bootstrapnavbarnavigationbar