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

integrating the WordPress header into the WHMCS client portal

While working on a project, I am facing the challenge of aligning the WHMCS client area with my WordPress site. Progress has been made, but I have hit a roadblock. My goal is to integrate the header of my WordPress site into WHMCS. I initially attempted t ...

phpcsswordpresswhmcs

Converting JavaScript CanvasRenderingContext2D states array into a serialized format

Looking for a way to serialize a canvas' state in order to save it to a database for later restoration. Want to store the data as an object rather than a bitmap file. I've tried using .save() and .restore() on the context object, but they only m ...

javascripthtmlcanvas

Having issues with customizing the design of MaterialUI Accordion header

Link to my code sandbox project I am encountering issues with the styling in my Accordion Heading. My Accordion Contents are set up like this: <Accordion heading1= { <DishItem name="Döner Teller Spezial" price="13,60€"/> ...

cssreactjsmaterial-uiaccordion

How to create a Vue.js animated navbar with scroll opacity

I am looking to create a fixed navbar that changes opacity based on user scrolling behavior. Initially, I want the navbar background to be transparent and then transition to white as the user scrolls down the page. An example of what I am trying to achieve ...

javascriptjquerycssvue.js

What is the best way to responsively center an after pseudo-element above its parent?

Looking to create a dynamic tooltip without any fixed widths or constraints on the parent element. The process seems simple enough, but I'm facing an issue with centering the after element due to an existing transform attribute of transform: translat ...

cssvue.jssasspseudo-element

I am having trouble getting bootstrap-icons to work in my Angular project and I'm eager to figure it out

I am having trouble incorporating bootstrap-icons into my angular project. Despite running the npm i bootstrap-icons command, I am unable to successfully add icons using icon fonts on my webpage. As a temporary solution, I have added the bootstrap icon CD ...

htmlcssangularbootstrap-5bootstrap-icons

Error encountered while attempting to load JSON data into HTML audio element

I need to incorporate data from a JSON file into an HTML audio tag. While I've been able to extract the desired information from the JSON, I'm facing difficulty loading it into HTML. Here's what I've tried so far: <?php $json = file ...

phpjsonhtml

Using jQuery to load and parse a JSON file stored on a local system

I am a beginner in scripting languages and recently searched for ways to load and parse JSON files using jQuery. I found helpful resources on Stack Overflow. The JSON file I am working with is called new.json. { "a": [ {"name":"avc"}, ...

javascriptjqueryhtmljson

Establishing Fixed Positioning

I'm currently working on fixing the position of an image at the top of a mobile view page. .fixed { position: fixed; } This is specifically for use with Ionic. <div class="item item-image polygon"> <img src="http://urbanetradio ...

css

What is the best way to ensure that when a div is opened, the information to the right does not get pushed down?

I have a functioning menu bar, but when it expands, the content below is pushed down even though it should not be affected. How can I adjust my code to prevent this issue? View my website here: <div id="menu_wrapper"> <div id="menu"> &l ...

htmlcss

Blur images on parent div when hovering using javascript

After some extensive searching, I came across a few helpful explanations on how to achieve my desired outcome. By combining them, I was able to get everything working smoothly with the hover effect over the image itself. However, when I attempted to trigge ...

javascripthtmlhoverjquery-isotope

The strategy of magnifying and shrinking graphs on Google Finance for better analysis and

I am seeking to understand the logic behind a zoom-able graph similar to the one on Google Finance. I am aware that there are pre-made components available, but I am interested in a simple example that breaks down the underlying logic. ...

javascripthtmlcssajax

Unable to interpret the JSON reply from the server

I am currently developing a web application that sends data to a website, which then updates its database and returns a JSON array to replace my web app page. I am using AJAX for this query, but I am facing an issue with preventing the overwriting of my we ...

javascripthtmljson

The JQuery and Javascript code is malfunctioning in Internet Explorer version 6 and later

Can someone please assist me in troubleshooting why this code works perfectly in Chrome and FF, but does not continually update in IE6 & 8? $(document).ready(function () { window.setInterval(function () { $('div').each(func ...

jqueryajaxinternet-explorerhtmlreplace

The dilemma of selecting objects in Three.js

Currently, I am developing a small web application that utilizes three.js. However, I have encountered an issue: I created a prototype with my three.js content and everything functions correctly (the canvas size in the prototype matches the browser window ...

javascripthtmlthree.js

Exploring the power of add() method in getStyleClass() along with some code snippets

Recently, I successfully created a custom button in JavaFX by tweaking the style of a simple button using the setStyle() method with different String parameters based on whether the button was clicked or not. I wanted to convert this customized button int ...

javacssanimationjavafxcustom-controls

Having trouble locating the nivoslider IE8 jQuery bug, can't seem to track it

I am encountering an issue with the nivoslider script in IE8 and I am having trouble identifying what is causing it. The nivoslider works perfectly fine in all other browsers except for IE8. Any help or guidance on this matter would be greatly appreciated ...

jqueryhtmlcssinternet-explorer-8nivo-slider

Centering an image and menu in the middle of an HTML page

I have a school project where I am trying to align both an image and a menu in the center and middle. Here is my code on CodePen: LINK I will also share the code here: HTML <header> <img id="logo" src="https://exampleimage.com/logo.jpg"> < ...

htmlcss

Transfer responsibilities of events to the canvas and then fetch the Element in the handler

Currently, I am utilizing the Raphaël library to create a network graph, where nodes are depicted as circles. Users have the ability to dynamically add nodes by clicking on the canvas. When a new node is added, an Element object is pushed into both a Set ...

javascriptjqueryhtmlsvgraphael

Employing JavaScript to insert a JSON value as a parameter in an HTML element's attribute

In a JSON file, I have "img" properties with .jpg file paths as their values (e.g "images/image.jpg"). I am attempting to insert these values into the 'src' attribute of existing HTML elements. Below are my attempts so far: I tried creating te ...

javascripthtmlajaxjson