Creating a Sleek Horizontal Scroll Functionality for Multiple Rows with Bootstrap 5

The container allows scrolling for only half of its content. Afterwards, scrolling affects the navigation panel as well.

CSS:

  .horizontal-scrollable {
        overflow-x: auto;
        white-space: nowrap;
    }

HTML:

<div class="container horizontal-scrollable" style="border: 1px solid lime;">
    <div class="row flex-nowrap"  style="border: 5px solid gold">
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
            <div class="col" style="border: 1px solid red;">Column</div>
        </div>
    <div class="row flex-nowrap"  style="border: 5px solid gold">
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
            <div class="col" style="border: 1px solid red;">Column</div>
        </div>
    <div class="row flex-nowrap"  style="border: 5px solid gold">
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
            <div class="col" style="border: 1px solid red;">Column</div>
            <div class="col" style="border: 1px solid red;">Column</div>
        </div>
</div>

[Functioning correctly with scrollable container and navigation][1] [1]: https://i.sstatic.net/vYKUY.png [Issues arise after a certain breakpoint, causing the whole page to shift][2] [2]: https://i.sstatic.net/IgnTZ.png

cssbootstrap-4flexboxbootstrap-5bootstrap-grid

Answer №1

If you're looking to make all the row div elements inline, try using the display: inline-block; property.

For your situation, you can do the following:

.horizontal-scrollable > .row > .col {
    display: inline-block;
}

Additionally, consider modifying the code within the Horizontal-scrollable div for the row elements inside.

.horizontal-scrollable > .row {
    overflow-x: auto;
    white-space: nowrap;
}

This approach has worked well for me. You can find more information here.

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 text area within the input group is misaligned with the input group button

Here is an example of how I'm using the input group feature with Bootstrap: <div class="input-group" style="padding-left: 20px;"> <input type="text" name="s" class="form-control input-sm"> <span class="input-group-btn"> ...

htmlcsstwitter-bootstrap

Best practices for coding in HTML and CSS

Creating my first website for an internship has been quite a learning experience. Throughout my training, I was always advised to avoid embedding styles directly into the HTML code. However, now that I am actually developing a site, I can't help but f ...

htmlcss

retrieve the position of a descendant element in relation to its ancestor element

I'm encountering a challenge while attempting to solve this issue. I have elements representing a child, parent, and grandparent. My goal is to determine the offset position of the child (positioned absolutely) in relation to the grandparent. However, ...

javascriptjqueryhtmlcss

What is the best way to center align my horizontal subnav?

I am currently working on a horizontal navbar with horizontal submenus. One issue I am facing is getting the elements in mysubnav to align centrally instead of being pushed to the left all the time. If you need a visual representation of what I mean, plea ...

javascriptjqueryhtmlcssnavigation

Troubleshooting CSS3 @keyframes animation issues within Firefox's shadow DOM

I am currently working on creating a custom shimmer loader using CSS3 keyframes animation within the shadow DOM. While the shimmer effect displays perfectly in Chrome and Safari, it seems to be malfunctioning in Firefox. Below is a concise snippet that de ...

cssfirefoxcss-animationsshadow-dom

Ensure that the heights of columns in UL CSS are aligned regardless of the number of lines they contain

In my current project, I am using CSS columns to establish a two-column layout for an unordered list. Here is the code snippet: HTML <div class="meta-data"> <ul> <li><i class="fa fa-chevron-right fa-xs"></i><str ...

htmlcsshtml-lists

Issue with Bootstrap 5.2 carousel not toggling the visually-hidden class

The hitboxes of the previous and next buttons are visually hidden. Additionally, the indicators at the bottom appear strange, and the sliding animation is not as smooth as expected. Despite searching extensively and trying various solutions, I am still un ...

htmlcsscarouselbootstrap-5

Is it possible for a div with fixed position to still have scrolling functionality

My fixed positioned div (#stoerer) appears to be moving while scrolling, although it is just an optical illusion. Check out this visual explanation: view gif for clarification Below is the code snippet in question: <div id="stoerer"> <button ...

javascriptjqueryhtmlcsssass

Error message: The import from './components/headerComponent/header' failed because it does not have a default export. Make sure to export it as default to be able to import it

I've been trying to bring a header from one file into another, but it's not cooperating. import React from 'react'; import { Typography, Card, CardContent } from '@material-ui/core'; import Header from './components/head ...

javascripthtmlcssnode.js

Looking for help organizing a navigation bar?

I recently embarked on the journey of creating my own website and I am in need of assistance from individuals who possess expertise in CSS and HTML. The specific challenge I'm currently facing involves aligning the navbar elements properly. I aim to p ...

htmlcssbootstrap-5

Reorganize elements using CSS styling

I have a trio of child divs with the classes span2, span7, and span3. When my browser width drops below 763px, I want them to display in the order span2, span3, and span7. How can I achieve this using CSS? Here is the code snippet I started with: <div ...

htmlcss

Easily showcase a limitless number of items within a 10-column grid using Bootstrap!

This is the code snippet: <div *ngFor="let minute of state.minutes.specificMinutes.selectedMinutes | keyvalue" class="col-sm-1 checkbox-container"> <div class="custom-control custom-checkbox"> <input type="checkbox" (click)="state.m ...

htmlcssangularbootstrap-4

When attempting to shift the label above the input field upon focusing, it unexpectedly becomes concealed

I am attempting to reposition the label above the input field when it is focused, but instead it becomes hidden. label > span::focus { top: -20px; font-size: 15px; color: blue; } Check out the complete Html & CSS code. Update: ...

htmlcss

My code seems to be experiencing issues with the carousel functionality despite incorporating Bootstrap

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <% campground.images.forEach((img,i)=> { %> ...

cssbootstrap-5

Adjust the width of the <li> element based on the quantity of its children

If the number of list items can be changed dynamically, how can I adjust the width of each item so that the total width is always 100%? Here is an example code snippet: <nav> <ul> <li>A</li> <li>B</li> &l ...

htmlcss

Navigation bar failing to show all content on Safari web browser

When navigating to this website, http://www.togethermutualinsurance.co.uk, using any browser except for Safari on Windows, the menu displays correctly. However, in Safari, the title of the menus and submenus with images does not display properly. Despite ...

javascripthtmlcss

How can you trigger a modal to appear when an image is clicked?

There are images inside <div> tags. When one of the images is clicked, a modal appears to display information about the specific image. Each modal has a unique id or class, such as modal4. My example: <image type="image" src="Images/Drake.jpg" ...

htmlcssbootstrap-4

Traverse an SVG element using JavaScript

I have a beautiful star SVG that I created, and I want to use it instead of styling a span to create floating bubbles in my div. However, I'm facing some challenges in adapting my Javascript loop to incorporate the SVG for creating the bubbles, as opp ...

javascriptcsssvg

Display or conceal several elements using JQUERY/HTML upon hovering

Here is the current progress: <div style="position: relative;"> <a href="#games"> <div class="sidenavOff"> <img src = "images/card_normal.png" /> <img src = "images/category_icons/icon_games.png" style = "position: a ...

javascriptjquerycsshtml

Creating an engaging Uikit modal in Joomla to captivate your audience

I need help optimizing my modal setup. Currently, I have a modal that displays articles using an iframe, but there is some lag when switching between articles. Here is the JavaScript function I am using: function switchTitleMod1(title,id) { document.g ...

javascriptjqueryhtmlcssuikit