Ensure that the buttons are arranged in a single row and have horizontal overflow in the mobile version

After using Bootstrap, I managed to create a row with multiple buttons.

I encountered an issue where the buttons do not align properly when viewed on mobile devices, as depicted in the image provided.

Is there a solution to ensure that these buttons always stay aligned, even if it means having an overflow-x scroll option available?

See Demo

  <div class="row justify-content-center" style="margin-top: 160px;">
    <a style="color: #51CC8B;" class="btnP" >Tots
      <span class="nav-link btn-glyphicon1">34</span>
    </a>
    <a style="color: #4981C2;" class="btnR">Drops
      <span class="nav-link btn-glyphicon">6</span>
    </a>
    <a style="color: #4981C2;" class="btnD">Drags
      <span class="nav-link btn-glyphicon">3</span>
    </a>
  </div>

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

htmlcsstwitter-bootstrapbootstrap-4responsive-design

Answer №1

Update the outer div by including the flex-nowrap class:

<div class="row justify-content-center flex-nowrap" style="margin-top: 160px;">

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

Searching for text within an HTML document using Selenium in Python can be easily achieved by using the appropriate methods and

Is there a way to find and retrieve specific texts within an HTML file using Selenium in Python, especially if the text is not enclosed within an element? <div class="datagrid row"> ==$0 <h2 class="bottom-border block">Accepted Shipment</h ...

pythonhtmlcssseleniumselenium-webdriver

Creating two columns using React and Material-UI Grid while utilizing just one map function for iteration

I am facing a challenge with Material-UI Grid. I want to display the information from my map function in two columns instead of one. I tried adding another Grid item sm={6} and using the same map function, which resulted in two columns but with identical i ...

cssreactjsdictionarymaterial-uigrid

The revolutionary Bootstrap 8 grid layout system

I am in need of a system that consists of 8 columns, and I require a Bootstrap class that will allow an HTML element to span across 2 or more of the columns within the grid. The purpose of this is to create a PMS (Property Management System), where certai ...

htmlbootstrap-4

How can I efficiently utilize HTML/CSS/JS to float items and create a grid that accommodates expandable items while minimizing wasted space?

After meticulously configuring a basic grid of divs using float, I've encountered an issue. When expanding an item in the right-hand column, the layout shifts awkwardly. My goal is to have boxes A and B seamlessly move up to fill the empty space, whi ...

javascripthtmlcssuser-interfacecss-float

Are section elements aware of their positional order in the document structure?

For the Terms of Service page, I decided to incorporate both the ol element and the section element for two specific reasons: Ensuring each item is guaranteed in sequential order Allowing each part to be sectioned off individually ol { list-style ...

htmllanguage-lawyeraccessibility

deactivate a vessel, causing all of its contents to be rendered inactive

Hi there, I am in search of a container that has the ability to disable all elements within it, not just inputs but also images and other elements without the disabled property. I do not want to hide the container, but rather disable it. Do you know if suc ...

jqueryhtml

How can I prevent CSS styles from affecting all the tables on my website?

One issue I'm facing is that the CSS code intended for one table is affecting all the other tables on my website. Here is an example of the CSS code: tr:last-child td:last-child { border-bottom-right-radius:3px; } /*effects map*/ td { background: ...

htmlcss

Webstorm encounters difficulties compiling Sass

While attempting to utilize Sass in the Webstorm IDE, I noticed that it is defaulting to Ruby 1.8 (OS Default) instead of my preferred RVM Ruby Version (1.9.x). To address this issue, I tried setting the path for Sass in the Watcher-Configuration: PATH=$ ...

javascripthtmlcsssasswebstorm

What is the correct way to properly wrap the div component in this code snippet?

I am currently working on implementing a Javascript component that displays pinned locations and related information on a map. I have made some progress with the implementation, but unfortunately, it does not appear correctly in the actual site. There is a ...

javascripthtmljquerycssimplementation

The minified version of Bootstrap's CSS will only be loaded when I explicitly import it in my index

I used to rely on BootstrapCDN for my styles, but now I want to download the files and use them locally. However, when I try to load the styles without an internet connection, they don't seem to work properly, especially the grid layout. My current s ...

htmlcssreactjsbootstrap-4

Issue with ng-repeat causing HTML table data to not appear

Trying to create a Flask web app, I encountered an issue while attempting to display tabular data on my webpage using AngularJS. Despite using ng-repeat to iterate through the data, it doesn't seem to work and no errors appear in the console. Can anyo ...

htmlangularjsangularjs-ng-repeat

Trick for adjusting padding on top and bottom for responsive blocks of varying widths

Hello there, I've been working on a project where I need to create a responsive grid of cards, like news articles, that maintain their proportions even when the browser's width changes. To achieve this, I decided to use an aspect-ratio hack by s ...

htmlcss

Having trouble with your website div not appearing correctly on Firefox?

I'm facing an issue with the display of a website (found here). The elements inside the div with the class name of .index_container are not appearing correctly in Firefox. Despite being present, they remain invisible. I've attempted to resolve th ...

htmlcssfirefoxsass

Creating a two-column layout in CSS using div elements instead of tables allows for

Why is it so challenging to create a two-column form layout using CSS? All I'm trying to achieve is: Name: John Smith Age: 25 Description: A long text that should wrap if it exceeds the border, while still aligning with the first l ...

htmlcsslayout

What could be causing my table to appear multiple times in the HTML when using jQuery?

Using Jquery to dynamically return a list of products, render it as HTML, and show it on the page using $(selector).html(html), I've encountered an issue. When adding products to the cart too quickly, which triggers the rendering of the cart again, th ...

javascriptjqueryhtml

What is the best way to show a table with 100% width in the Chrome browser?

I am currently working on debugging and expanding an express application that showcases a dataset through a series of nested tables on a webpage. Initially, all the CSS resided within style tags in the head section of the HTML file, and the tables were dis ...

javascripthtmlcsstwitter-bootstrapexpress

Tips on modifying the background color of a read-only field in an edit form

Changing the background color of a readonly field in the edit form of Free jqgrid can be a challenge. One potential solution involves specifying a style: .jqgrid-readonlycolumn { background-color: #FFFFDD; } This style is then used in the colmodel e ...

jqueryhtmlcssjqgridfree-jqgrid

Tips for Accessing a New Website Using the Floating Layer Close Button

How can I trigger the opening of a new browser window when a visitor clicks the close "x" on my floating layer ad? The close button is within an HTML link code ("a href"), but simply putting a URL in there does not seem to work. <script language=" ...

javascripthtml

Adding Text Above a Material Icon in Angular: A Guide

Here is some sample HTML code to consider: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <mat-icon class="fa fa-folder" style="font-size:48px;"><span style="color: re ...

htmlcssangulariconsmat

How can I apply various textures in three.js?

Hello there! I'm diving into the world of threejs and currently working on a block game similar to Minecraft. Instead of relying solely on objects, I've decided to build my program using planes (specifically the PlaneGeometry class). As I wrap ...

javascripthtmlthree.js3drendering