How to vertically align Bootstrap5 buttons on mobile devices

I'm currently developing a web application and I'm facing an issue with centering two bootstrap buttons next to each other on mobile devices. While it works fine on the computer, when I inspect the page on a mobile device, the buttons stack vertically instead of being aligned horizontally. How can I modify the code to ensure that the buttons appear side-by-side on mobile devices as well? Here's the current code snippet:

<div class="container">
        <div class="row justify-content-center">
            <div class="col-md-4 col-lg-3 text-center">
                <a href="#" style="font-size: 18px;" class="btn btn-primary btn-lg mb-3" role="button">Button 1</a>
            </div>  
            <div class="col-md-4 col-lg-3 text-center">
                <a href="#" style="font-size: 18px;" class="btn btn-primary btn-lg mb-3" role="button">Button 2</a>
            </div>
        </div> 
</div>
htmlcssbootstrap-5

Answer №1

Enhance your layout by eliminating breakpoints in your columns and allowing them to occupy half the space across all screen sizes:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e0ededf6f1f6f0e3f2c2b7acb0acb2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-center">
    <div class="col-6 text-center">
      <a href="#" style="font-size: 18px;" class="btn btn-primary btn-lg mb-3" role="button">Button 1</a>
    </div>
    <div class="col-6 text-center">
      <a href="#" style="font-size: 18px;" class="btn btn-primary btn-lg mb-3" role="button">Button 2</a>

    </div>
  </div>
</div>

Answer №2

This could appear neater

<div class="col-lg-12" style="display:flex">
<div class="buttons" style="margin:auto">
<a class="btn btn-secondary" href="">Button A</a>
<a class="btn btn-secondary" href="">Button B</a>
</div>
</div>
</div>

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

Is there a way to specifically target CSS media queries if the device resolution is similar, but the device screen size (measured in inches) varies

I possess two distinct gadgets. 1. T2 light - LCD : 15,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query target : width = 1336px 2. T2 mini - LCD : 11,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query t ...

javascriptandroidjquerycss

What to do when encountering a problem with HTML, CSS, and JS while loading a webpage from an SD card to a WebView

I am facing an issue while loading an HTML file from the SD card to a webview. The problem is that the CSS, images, and videos are not loading properly in the webview. Compatible with Android 4.4 KitKat and Chrome version Not compatible with versions belo ...

javascriptandroidhtmlcssstorage

Concealing and revealing template URLs with AngularJS

I am currently working with a dynamic Array in my Controller that contains templates (html files) structured similarly to the example below: $scope.templates = [ { name: 'template1.html', url: 'template1.html'}, { name: ...

javascripthtmlangularjs

Facing issues with converting SVG to PDF in Rails 5.0

Below you will find two images: the first one is displayed in a browser view, while the second one shows a PDF view. The issue lies with the SVG to PDF conversion. I have dynamically set the stroke-dashoffset value, which works correctly in the browser bu ...

jquerycssruby-on-railspdfsvg

Tips on updating a specific value within an element stored in an array

I'm currently in the process of setting up a table where each row contains unique values. Using a for loop, I am able to generate these rows and store them in an array. Now, my question arises when I consider modifying a particular value with the id " ...

javascriptjqueryhtmlcss

The Google calendar integration is working, but the appearance leaves much to

I embedded a Google calendar, but I'm having trouble centering it on the page without it overflowing onto the top menu. Can you help me fix this issue? If you'd like to see what I'm referring to, you can visit this link: ...

htmlcssdreamweaver

Steps to trigger a Bootstrap modal when the user clicks anywhere on the webpage

I need assistance with setting up a Bootstrap dialogue modal to open at the clicked position on a mousedown event when a user interacts with the page. Despite my attempts, the dialogue modal is not opening where it should be. Here's what I've tri ...

javascriptjquerycsstwitter-bootstrap-3modal-dialog

How to Round Decimals in DataTables

I am encountering an issue with my data table's footer, which is supposed to display the sum of each column. However, while the values within the table are rounded to two decimal places, the values in the footer do not always adhere to this formatting ...

javascripthtmldatatable

Search Bar on the Website for Google Search

I am currently working on a basic website and I'm looking to incorporate Google Search functionality into it. I've managed to create a simple search box that redirects users to the Google Search Results page when they input their query. However, ...

htmlcss

transforming a div to behave similarly to an iframe

I am trying to load content from my page into a div element using the following function: function loadmypage(DIV, pageURL) { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } e ...

javascriptajaxiframehtml

Tips for inserting a personalized image or icon into the ANTD Design menu

Can anyone help me figure out how to replace the default icons with a custom image or icon in this example: https://ant.design/components/layout/#components-layout-demo-side I attempted to do it by including the following code: <Menu.Item to="/" key=" ...

javascriptcssreactjsantd

The HTML and JavaScript implementation of the Game of Life is experiencing technical difficulties

I attempted to create my own version of the Game of Life using HTML canvas and JavaScript. With the aid of various online tutorials, I was able to write a piece of code that I am still confident in. However, upon launching the HTML page in the browser and ...

javascripthtmlhtml5-canvasconways-game-of-life

Troubleshooting Bootstrap Column Display Issues on Mobile Devices

I used bootstrap columns to organize my users' information. While they look good on larger screens like laptops and desktops, on smaller phone screens the second column appears to have some excess margin at the top. How can I fix this issue? <div ...

htmlcssbootstrap-4

Are HTML entities ineffective in innerHTML in javascript?

Take this example: <script type="text/javascript> function showText() { var text = document.getElementById("text-input").value; document.getElementById("display").innerHTML = text; } </script> <?php $text = "<html>some ...

javascripthtml

Determine the attribute value based on the source

Is there a method to retrieve the value of the swap-section attribute based on a specific image source? <div class="ig_gallery_right_img" style="overflow-y: scroll"> <img src="/corp/homeowner/images/promo/gallery_traditional_3_sm.jpg" ...

jqueryhtmltagsattr

Utilizing numerous copies of a single plugin

I recently integrated a plugin called flip-carousel.js into my website and here is an example of how it looks on the site. Check out the sample implementation Now, I encountered an issue when trying to use multiple instances of the same plugin. When init ...

javascriptjqueryhtmlcss

Incorrect Media Queries breaking LayoutNote: This is a completely unique rewrite

My golden rule for media queries is set... @media only screen and (min-width: 768px) and (max-width: 1080px) { Strangely, I picked 1080 as a test number... Unexpectedly, the background color changes at 1190px when resizing my page to test breakpoints. ...

htmlcssmedia-queries

Tips for fixed positioning of a div on a webpage without being affected by the Windows logo shortcut keys + Left/Right arrow

Whenever I utilize the keyboard shortcuts to move a window from one side of the screen to another and then minimize it either upwards or downwards, I find myself faced with an issue. I can accomplish this action by using the Windows key in combination with ...

csshtml

The external embedded CSS seems to be missing from index.html after the Docker build process

My Vue/Webpack application includes an embedded CSS link in my index.html file that references an external source. Here is an example snippet: <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" con ...

htmlcssdockernpmwebpack

How are these background images able to remain in a fixed position like this?

Trying to name this question correctly was a bit tricky. Hopefully I got it right. I have a new client and they want their website to have a similar feel to . If you check out the index page and scroll down, there's this cool 'smooth animation& ...

htmlcssbackground-imagebackground-attachment