How to properly align the title of a mobile modal in Bootstrap 4

I'm new to using bootstrap for my website, specifically under bootstrap 4. I have a modal that is left aligned on PC, which is great. However, I want the title to appear at the top of the div on mobile for better readability.

Right now it looks very congested on mobile. How can I achieve this properly?

I attempted using display:flex; in the modal CSS, but the alignment remains on the left side when viewed on mobile devices. Additionally, the text overlaps because the title is long.

Answer №1

Utilize a media query to tailor the styling according to the screen size.

Include a custom class in the modal title and apply the necessary styling within the media query:

<h5 class="modal-title modal-title-custom">Modal title</h5>
@media only screen and (max-width: 767.98px) {
  .modal-title-custom {
    text-align:center;
    width:100%;
  }
}

Modify the breakpoint to center the title: Bootstrap 4 Breakpoints

If text-align does not achieve the desired effect, consider using justify-content: center; - CSS justify-content.

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

The button in Bootstrap 4 that triggers the modal stays in a highlighted or clicked state even after the modal has been

I am currently utilizing the button below to trigger the opening of a modal window However, upon closing the modal, it seems to maintain a highlighted or clicked appearance with a shadow effect. Initially, I assumed I could address this issue by implement ...

Located just above the edge of the screen with absolute positioning

One of the features on my website is a small modal that smoothly slides in from the top of the page upon entering, and then slides back out again when clicked on. However, I am encountering an issue where I do not want the modal to completely disappear aft ...

Arrange images with haphazard placement

Can someone guide me on creating a block of images when working with an array of random items? https://i.sstatic.net/qEcQy.png ...

I'm attempting to use Bootstrap to align my divs, but unfortunately, it doesn't seem to be working as I had hoped

I've been attempting to align divs using bootstrap, but I'm encountering issues. I prefer not to use a table for this purpose and have experimented with the table tag, but would rather achieve alignment with divs and bootstrap. My familiarity ...

Steps for breaking down a given string into divisions that correspond to an A4 sheet

Within my content, there are various styles applied. For example: This is a <b>bolded</b> word. I am seeking a solution to divide this long string into smaller sections that would fit on an A4 page accurately. The goal is to maintain the integ ...

Using the "d-md-block" class in Bootstrap results in a new row displaying both an icon and text within the

Struggling with a seemingly simple question here. I am currently utilizing BT4 navtabs, where the nav-item consists of an icon (fontawesome) and accompanying text. However, due to limited space on mobile devices, I need to hide the text only for that speci ...

What is the best way to initiate a Bootstrap carousel so that it begins with the first image every time a modal window appears

I am in the process of creating my own portfolio to showcase my work. I have implemented a feature where clicking on an image opens up a Bootstrap carousel. However, I'm facing an issue where the carousel doesn't always start with the first imag ...

How can I use CSS to make a child element in a grid layout stretch horizontally to full width?

I am currently working on designing a grid layout that will display a child element when clicked. Here is what I have in mind: [ link1 ] [ link2 ] [ link3 ] [ link4 ] [ link4 ] [ link4 ] When clicked, it will turn into: [ link1 ] [ link2 ] ...

Ways to implement a parallax effect by changing images within a specific div on scrolling with the mouse

First and foremost, thank you for taking the time to review my question. I am currently developing a website and I need to implement a vertical image transition effect within a selected division, similar to a parallax effect. Within this div, there are 3 ...

How do I make a div's height equal to 100% of the height of its parent

I am trying to make a button stick to the bottom of a card no matter how much content is on it. I used the Bootstrap class mt-auto, which worked well. However, when I set the height of all divs to 100%, the row in the card body overflows from the lg breakp ...

Troubleshooting the Problem of Uneven Heights in Bootstrap Columns

I am facing an issue with a dropdown inside a Bootstrap grid. When I click on the dropdown, the height of the row is not increasing as expected. Can anyone guide me on how to achieve this? HTML: <div class="container"> <div class=& ...

What is the best way to ensure that the video width is fully responsive at 100%?

Looking for help with making a Shopify website more responsive. I have a hero video at the top, but it's leaning to the right and leaving a blank space on the left. Can anyone assist me in making it 100% responsive without much coding knowledge? I&apo ...

Tips for creating a full-length sidebar below the top navigation using Bootstrap 4

Recently started using Bootstrap and decided to work with the alpha version of Bootstrap 4 to create a website for my home network. My main concern is with the sidebar, as I want it to cover the entire left side of the page, starting just below the top na ...

Having trouble with CSS when using jQuery's gt() selector?

While working with jQuery, I encountered a warning from Firefox regarding the following code snippet: $("li.example div.code:gt(4)").hide(); Firefox indicates a CSS Error: Unknown pseudo-class or pseudo-element 'gt'. Although the code works as ...

Unable to place the div/ul above a preceding div

I am having trouble setting up a menu of tabs. I want it to move up so that it is positioned just above the previous div. However, every time I try to move it up, it ends up going underneath the previous div. I have attempted to change the z-index but with ...

JavaScript WYSIWYG Algorithm

Despite my searches on SO, it appears that most questions revolve around simply making a div editable using contenteditable="true". I am interested in finding the most effective method for tracking all formatting tags applied to a document. Merely togglin ...

I have successfully added an image to my CSS file, and it is appearing in Chrome's inspect feature. However, the image is not visible on the actual website

Here is the code snippet: .nav-link-apple { width: 1.6rem; background: 4.4rem; background: url(./Logo.jpg) center no-repeat; } Although the image I added can be seen in inspect on Chrome, it is not visible on the actual webpage. I have tried s ...

Attempting to insert an image logo within a Bootstrap logo design

Trying to customize my nav bar with a logo instead of text, but my attempts have been unsuccessful so far. Here is what I have tried: <li class="nav-item"> <a class="nav-link active" aria-current="page" img src=&q ...

Issues detected with Foundation Block Grid in small size setting

I created a React component to display a series of div elements on a page using the Foundation Block Grid system to control the number of divs per row. However, I am facing an issue where the number of divs does not change when switching to a small-sized s ...

Model not displaying on Apexcharts

Currently, I am using Angular-15 and Bootstrap-5 application for the Apexchart The issue arises when trying to open the Model and the chart does not show up. If I refresh the page and zoom out to 90% or zoom in to 100%, the chart appears. However, upon re ...