How to utilize Bootstrap 5 flex for aligning text in the center position

Within these specific divs:

<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
            <a href="#" title="Falazóhabarcs" class="main_category d-flex justify-content-between align-items-center radius p-3">
                <div>
                    <i class="fa fa-th-list me-2"></i>Gépi alapvakolat
                </div>
                <div>
                    <i class="fa fa-chevron-right"></i>

                </div>
        </div>

How can I ensure the text is centered properly on smaller screens, like in the image below?

Or should I consider using 3 div elements within the hyperlink and placing the text in the middle one?

In the visual reference provided, the third image is mine, marked with a red X.

Check out the image here

htmlcssflexboxbootstrap-5

Answer №1

Make sure to include the "d-flex align-items-center" classes in the parent tag of the icon and text on the left side.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
            <a href="#" title="Falazóhabarcs" class="main_category text-dark border text-decoration-none rounded-2 d-flex justify-content-between align-items-center radius p-3">
                <div class="d-flex align-items-center">
                    <i class="fa fa-3x fa-th-list me-2"></i>Gépi alapvakolat
                </div>
                <div>
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>
        </div>

Answer №2

To ensure the text is centered properly on smaller screens, you have the option to utilize Flexbox or Bootstrap's utility classes. In this scenario, opting for Bootstrap's utility classes would provide a simpler and more cohesive solution with your current codebase. Simply add the 'text-center' class to the outer div element to center-align the text within the hyperlink. Furthermore, if you wish to center-align the icon as well, include the 'd-flex justify-content-center' classes in the first inner div.

<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="#" title="Falazóhabarcs" class="main_category d-flex justify-content-between align-items-center radius p-3">
        <div class="d-flex justify-content-center align-items-center">
            <i class="fa fa-th-list me-2"></i>Gépi alapvakolat
        </div>
        <div>
            <i class="fa fa-chevron-right"></i>
        </div>
    </a>
</div>

Answer №3

@media only screen and (max-width: 600px) {
  .text-font {font-size: 10px;}
}
<div class ="text-font">
      <i class="fa fa-th-list me-2"></i>Gépi alapvakolat
</div>

adjust Gépi alapvakolat font size for mobile view using the mentioned media query

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

npm installs a multitude of dependencies

Recently, I purchased an HTML template that includes various plugins stored in a directory named bower_components, along with a package.js file. While trying to add a new package that caught my interest, I opted to utilize npm for the task. Upon entering ...

javascriptcssnode.jsnpmpackage

What steps do I need to take to transform this click event function into one that is triggered automatically upon the div loading?

In order to automatically load content into a div using innerHTML, the PHP file must be retrieved and the div updated with its content. Within this div is another one labeled "tweet" which displays actual tweets based on a specific hashtag provided through ...

javascriptjqueryajaxhtmldynamic

The WebRTC video feature is functioning on the local network but is encountering difficulties

Trying to grasp WebRTC has been quite the journey for me. In an attempt to troubleshoot my failed video transfer between computers, I uploaded what I have so far onto a temporary github repository: https://github.com/stevendesu/webrtc-failure My goal is ...

htmlwebrtc

The :not selector in a chained condition is not functioning properly for a child div

I have a child div that is being impacted by the .img class. Even when I use the :not selector for this div like so .main .content .index-exp .img:not(.view-image){ /*rest*/ } it continues to affect my div. You can view the issue at this link. Is this ...

htmlcsscss-selectors

My PHP script is not functioning correctly with Ajax

I am currently working with HTML5, PHP, and JavaScript. My goal is to implement Ajax in order to display the sizes of a selected product when an option is chosen from #productoSeleccionado. However, I believe that there may be an issue with my code as the ...

javascriptjqueryajaxhtml

Capture various data points in an array with each click

I am currently working on a menu of buttons where users can select multiple options at the same time. My goal is to record all selected buttons in one array instead of individual arrays for each button. The end result I hope to achieve is an array like t ...

javascripthtmljqueryarrays

Need help styling a CSS for an iFrame on the same domain as my website?

After doing some research and browsing through Stack Overflow questions, I've discovered that even if you don't have access to the iFrame's stylesheet, you can still make edits as long as it resides in the same domain as your webpage where y ...

htmlcssiframe

Maintain the selected bootstrap tab even after the page is refreshed, even when the content is loaded dynamically

I am currently facing an issue with loading tabs using Angular. Whenever a tab is clicked, the id is saved to localStorage. Now, I want to programmatically click on the same tab using jQuery when the page refreshes. However, since the DOM element for the ...

javascriptjqueryhtmlangularjstwitter-bootstrap

How can I stack two appbar components from Material Ui on top of each other without the vertical line separating them?

I am facing a challenge while trying to incorporate two AppBar components in Material-UI, stacked one on top of the other. The problem arises when a line appears at the end of the first AppBar, overlapping with the second one. Click here to view an image ...

cssreactjsmaterial-uicomponentsstyling

What steps can I take to bring this idea to life in my gallery?

Currently, I am facing a roadblock while transitioning my design concept into actual code. My main concern lies with creating this art piece. Although the gallery is up and running with all the images in place, I'm encountering difficulties with the s ...

javascripthtmlcss

Tips for presenting random images from an assortment of pictures on a webpage

I'm looking to enhance my website by adding a unique feature - a dynamic banner that showcases various images from a specific picture pool. However, I'm unsure of how to find the right resources or documentation for this. Can you provide any guid ...

javascripthtmlcssangular

The customized styling for Material Angular does not seem to properly apply to <md-card> elements within ui-views

I am trying to achieve a specific effect on the ui-views <md-card id="sidebar" flex="20" class="sche-card" layout-padding="true"> <div ui-view="card" autoscroll="false"></div> </md-card> However, I am facing an issue where the car ...

cssangularjspartialsangularjs-material

Struggling to determine if the checkbox has been ticked?

I have integrated a like button on my website using socket io to ensure that it updates for all users when the like button is clicked. I have successfully implemented a like() function that emits liked, increments a counter, and displays it on the page. Ho ...

javascripthtmlnode.jscheckboxsocket.io

Utilize the text box feature for manipulating the data field in Angular4

Within my grid view, there exists a column labeled remark. This specific field contains various values, one of which is absence. My objective is to modify the remark value exclusively when it is equal to absence, followed by clicking the corresponding icon ...

htmlangulartypescript

Having difficulty positioning content inside a div element

I am working with a set of three divs, each containing a .header class and a .content class. While I have managed to align the .header class correctly, I am facing an issue with aligning the .content class below the header with 10-15px padding on all sides ...

htmlcss

Adding an additional stroke to a Material-UI Circular Progress component involves customizing the styling properties

I am attempting to create a circular progress bar with a determinate value using Material-UI, similar to the example shown in this circular progress image. However, the following code does not display the additional circle as the background: <CircularP ...

javascriptcssreactjsmaterial-ui

What can I do to stop my list items from dropping below the menu even when there isn't enough space?

I'm facing an issue with my menu and despite several attempts, I can't seem to resolve it. In Firefox, everything looks fine, but in other browsers, the last anchor tag inside my menu keeps collapsing underneath. I've tried various solutions ...

csscss-float

What is the best way to gather Data URI content through dropzone.js?

I am currently utilizing Dropzone for its thumbnail generation feature and user interface. However, I am only interested in using the thumbnail generation ability and UI and would prefer to collect all the data URIs myself and send them to the server via a ...

javascriptangularjshtmldropzone.js

Unable to extract tabular information using BeautifulSoup on a specific webpage

I recently came across a helpful tutorial online about web scraping with Python using Beautiful Soup. The tutorial can be found at this link. Following the steps in the tutorial, I successfully scraped data from an HTML table. However, when I attempted to ...

pythonhtmlweb-scrapinghtml-tablebeautifulsoup

Performing a simulated click on a dynamically inserted element using pure JavaScript

I am faced with the challenge of programmatically navigating a ReactJS-based website in a looped workflow. The process involves clicking on Element1, dynamically altering the web page to add Element2, then clicking on Element2, and so on until eventually r ...

javascripthtmlreactjs