I am in search of a way to implement horizontal scrolling in Bootstrap 4

I am trying to implement a horizontal scroll feature in Bootstrap 4 with the following code, but I'm having difficulty achieving it.

<div class="scroll-horz">
  <div class="row">
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>     
  </div>
<div class="row">
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>
    <div class="col-md-4"> Test </div>     
  </div>
</div>
htmlcssbootstrap-4

Answer №1

To implement this layout, follow the steps below:

Step 1: HTML Structure

<div class="horizontal-scroll">
  <div class="row">
    <div class="col-md-4"> Example </div>
    <div class="col-md-4"> Example </div>
    <div class="col-md-4"> Example </div>
    <div class="col-md-4"> Example </div>
    <div class="col-md-4"> Example </div>     
  </div>
  <div class="row">
    <div class="col-md-4"> Example </div>
    <div class="col-md-4"> Example </div>
    <div class="col-md-4"> Example </div>
    <div class="col-md-4"> Example </div>
    <div class="col-md-4"> Example </div>     
  </div>
</div>

Step 2: CSS Styling

.horizontal-scroll > .row {
  overflow-x: auto;
  white-space: nowrap;
}
.horizontal-scroll > .row > .col-md-4 {
  display: inline-block;
  float: none;
}

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

What is the best way to minimize the number of files being referenced for compilation?

Is there a way to reference less files in my project without including their styling in the final CSS output? @import(reference) filename.less When I try this, it seems to include the styles from filename.less in the final compiled CSS. Is there a better ...

cssless

Tips for concealing the check mark within a checkbox upon selection

I have checkboxes arranged in a table with 23 columns and 7 rows. My goal is to style the checkboxes in a way that hides the check mark when selected. I also want to change the background image of the checkbox to fill it with color when marked. Can someone ...

javascriptjqueryhtmlcss

Utilizing JavaScript and its scope to include text within an HTML document

I am currently working on a program that receives input from the user twice, specifically a risk carrier and a sum (although it is just a placeholder for now), groups these two values together, and then repeats the contents in a loop. You can see the progr ...

javascripthtmlarrays

Step-by-step tutorial on designing an input slider to dynamically adjust the CSS :before linear-gradient values

Is there a way to achieve a gradient effect using pseudo-element :before on an image that can be customized by adjusting a slider input? I've been trying to implement this feature with the following code, but have not been successful so far. var ...

javascripthtmljquerycss

Using XSL variables in JavaScript code

I've noticed that there have been similar questions asked, but none of the solutions seem to help in my case. So, I have this variable named 'var': <xsl:variable name="var"> val </xsl:variable> Now, I want to use it like thi ...

javascripthtmlxsltinnerhtmlxsl-variable

Adjusting jQuery Button Width with input type of "button"

Currently, I am working with jQuery Mobile to develop a straightforward Golf Score Card App. To calculate the total at the end of a form submission, I've implemented the following code. <input id="total" type="text" name="total" value="" readonly= ...

jqueryhtmlcssinputsize

Having trouble understanding why the border-radius attribute is not being applied to tables?

I've been trying to give the outer corners of tables a rounded appearance in HTML/CSS, but I can't seem to get the border-radius property to work properly. After inspecting the elements in Chrome's computed section, I noticed that the eleme ...

htmlcss

Issues arising with transferring information between components

My webpage had a header with a search engine input, a list of posts, and pagination all on one page. I made the decision to separate the header into its own component in a different Vue file. However, after making this change, searching for posts by their ...

javascripthtmlvue.jsvue-component

Combining HTML with multiple .ts files in Angular

I've been dedicating time to enhancing an Angular application, particularly a sophisticated table with intricate styling and functionality. Within my component file, there is a whopping 2k lines of code that includes functions for text formatting, ta ...

htmlangulartypescriptfiledivide

Attempting to create a dynamic dropdown menu with animated effects triggered by a key press

I've been attempting to construct a menu that initially appears as a small icon in the corner. Upon pressing a key (currently set to click), the checkbox is activated, initiating the animation. Most of the menu and animation are functional at this po ...

javascripthtmlcsslua

What's the best way to position the <li> element beneath the hamburger icon?

Is there a way to place the list element 'Home' below the hamburger icon and logo in Bootstrap 4 in mobile mode? I attempted to display the logo as style="display: block" with no success. <div class="container"> <nav class="navbar nav ...

twitter-bootstrapcssbootstrap-4twitter-bootstrap-4

modifying input field with radio button selection in Jquery

Is there a way to set the input field to have a default value and then change it, or disable it with a different value? $("#tax").value(19).prop("disabled",false); $("#tax").value(0).prop("disabled",true); <script src="https://ajax.googleapis.com/aj ...

javascriptjqueryhtml

The Bootstrap website is experiencing issues with mobile responsiveness as a result of content overflow

As a newcomer to web development, I am currently working on a Bootstrap website. Everything seemed to be working fine in desktop mode, but I encountered an issue in the mobile view where some Bootstrap columns were overflowing, causing a vertical white spa ...

htmlcsstwitter-bootstrapweb-deploymentbootstrap-5

Utilizing Javascript for altering HTML elements

It seems this issue is quite puzzling and I believe another perspective could be beneficial in identifying the problem. Despite my efforts, I am unable to understand why the "Energy Calculator" does not return a value when submitted, whereas the "Battery C ...

javascripthtmlinnerhtmlgetelementbyid

The card has adhered itself to the uppermost part of the Bootstrap 4 webpage

I attempted to center the container on the page, but it appears to be stuck at the top instead. I have come across a related question, but the solutions provided did not work for me. I even tried copying some code snippets, but in my Firefox browser, the ...

htmlfirefoxbootstrap-4

hint.css guide for inserting line breaks into hints

Is there a way to manually insert line breaks in Hint.css hints? I've attempted using <br>, \n,, and various combinations of them. I've also experimented with the following CSS properties: white-space: normal; word-wrap: break-word; ...

htmlcssline-breakshint

Retrieve the width of an element once the browser has finalized its dimensions

I am facing an issue with centering a pop-up box perfectly within the window using CSS properties. The code for the pop-up box styling is as follows: #pop_up { position: fixed; display: inline-block; border: 2px solid green; box-shadow: 0p ...

javascriptjquerycss

Place images within a card container using Bootstrap 4

I'm currently working with Bootstrap 4 and I am utilizing a card div. The card uses display flex and I am having trouble floating images within it, possibly because the card is configured to only allow one image. How can I successfully float multiple ...

cssbootstrap-4

Troubleshooting a navigation issue in Angular involving the mat-sidenav element of material UI while transitioning between components

I would greatly appreciate your assistance in resolving the issue I am facing. I have been trying to navigate from one view to another, but when I use an <a> tag nested within a <mat-sidenav>, I encounter the following error: "Uncaught (in prom ...

javascripthtmlangular

Is it possible to modify the class attribute of an HTML element in PHP upon clicking an input?

In this assignment, I am restricted to using only PHP and cannot incorporate JavaScript. Currently, my code is set up to detect a post from an input type="submit" and then check for empty or filled text inputs. The code currently echoes text based on the c ...

phphtml