What is the method for creating bootstrap columns within a single row that scroll horizontally instead of wrapping to the

I am looking to create rows with columns that total more than 12, arranged in a way that allows the columns to scroll horizontally. Here is an example of what I have attempted:

<div class="container-fluid">
    <div class="row">
      <div class="col-3">
        This is
      </div>
      <div class="col-9">
        the first row
      </div>
    </div>

    <div class="row">
      <div class="col-6">
        This is
      </div>
      <div class="col-6">
        the second row
      </div>
    </div>
    <!-- This should scroll -->
    <div class="row schedule">
      <!-- This is the header row -->
      <div class="row">
        <div class="col-3">
          Employee Name:
        </div>
        <div class="col-3">
          First Day:
        </div>
        <div class="col-3">
          Second Day:
        </div>
        <div class="col-3">
          Third Day:
        </div>
        <div class="col-3">
          Fourth Day:
        </div>
        <div class="col-3">
          Fifth Day:
        </div>
        <div class="col-3">
          Sixth Day:
        </div>
        <div class="col-3">
          Seventh Day:
        </div>
        <div class="col-3">
          Totals:
        </div>
      </div>

    </div>

  </div>

For styling, I have used the following CSS:

  .schedule{
          overflow: auto;
          white-space: nowrap;
          -webkit-overflow-scrolling: auto;

          background-color: lightblue;
      }

Your help is greatly appreciated.

Sincerely, Mike

cssbootstrap-4scrollrow

Answer №1

After some experimentation, I discovered that adding the flex-nowrap property to the specific row(s) resolved the scrolling issue I was experiencing.

Answer №2

Here is a suggestion to try out:

<div class="container-fluid">
    <div class="row">
      <div class="col-3">
        This section is for...
      </div>
      <div class="col-9">
        the content of the first row
      </div>
    </div>

    <div class="row">
      <div class="col-6">
        Here you can add...
      </div>
      <div class="col-6">
        more text for the second row
      </div>
    </div>

    <!-- Make sure this section scrolls -->
    <div class="row schedule">
      <!-- This row acts as the header -->
      <div class="row">
        <div class="col-3">
          Employee's Name:
        </div>
        <div class="col-3">
          Starting on:
        </div>
        <div class="col-3">
          Continuing from:
        </div>
        <div class="col-3">
          Another day:
        </div>
        <div class="col-3">
          Yet another day:
        </div>
        <div class="col-3">
          One more day:
        </div>
        <div class="col-3">
          Day before last:
        </div>
        <div class="col-3">
          Last day:
        </div>
        <div class="col-3">
          All combined:
        </div>
    </div>
    </div>
  </div>

Additional CSS styling:

.schedule >.row{
    flex-wrap: nowrap!important;
    display: flex;
    flex-direction: row;
    background-color: lightblue;
 }

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

Eliminating the excess space at the beginning of dialogues

I'm struggling with removing the unwanted whitespace above the title in my Material UI dialog popup. Even after applying a background color to the title and content area, I still have a white margin at the top that I can't seem to eliminate. Doe ...

cssmaterial-ui

The accuracy of VW and VH units is questionable

width: 100vw;/* Taking up the entire viewport width */ height: 100vh;/* Occupying the full height of the viewport*/ Despite my efforts to make this CSS match the exact dimensions of the viewport at 100%, it seems to be too large and causing overflow on th ...

htmlcssviewport-units

The Google Match Content Ad is adapting to larger screen resolutions in order to optimize its display

We've encountered a few problems with Google matched content ads and Bootstrap 4. 1) In larger resolutions, the ad attempts to adjust to the container size: https://gyazo.com/1f7f485f4a0dd91e33e69aaf41af2412 I've experimented with setting a fix ...

cssbootstrap-4adsense

Guide on adding a parent class to style all generated CSS rules in styled-components 5.3.5

When my application loads into a parent div with a specific class (for example, .my-app), is there a way to add the prefix .my-app to all classes generated by styled-components? For instance, consider a component like this: import React from 'react& ...

cssreactjsbabeljsstyled-components

Rearrange values from specific columns into a new row by using the select function along with the corresponding

My current project involves creating a basic time in and time out system with 3 pairs of in and outs for each person (identified by p_id). Here is an example of TableA: p_id time_id status timestamp 1 1 in 2013-1 ...

phpmysqlselectrow

What is the formula for determining the REAL innerWidth and innerHeight?

I am currently working on a responsive website using Bootstrap and I am looking to create an element that perfectly fits the screen size. When I set the height/width to 100%, the browser includes the toolbar, other tabs, and the Windows taskbar in the cal ...

javascriptjqueryhtmlcsstwitter-bootstrap

Position a div in the center and add color to one side of the space

I am seeking a way to create a centered div with the left side filled with color, as shown in examples. I have devised two solutions without using flexbox, but both seem somewhat like hacks. body { margin: 0; padding: 0; } .header { width: ...

htmlcss

Learn how to use Bootstrap to style your buttons with centered alignment and add a margin in between each one

Looking to center four buttons with equal spacing between them? Here's what you can do: |--button--button--button--button--| Struggling with manual margin adjustment causing buttons to overlap? Check out this code snippet: <div id=""> ...

htmlcssbootstrap-5

Ways to ensure even spacing in a responsive header design

On my homepage, I have a large header image that is responsive in the mobile version. However, I am having trouble managing the spacing between the button and text below it. The spacing varies on different mobile screens and sometimes appears larger than i ...

cssmobileresponsive-designresponsive-images

What is the process of using an if statement in jQuery to verify the existence of a property in a JSON file?

I am working on a task to incorporate an if statement that checks for the existence of a specific property in a JSON file. If the property exists, I need to display its value within HTML tags <div class='titleHolder'> and "<div class=&ap ...

javascriptjqueryhtmlcssjson

auto-scrolling webpage as elements come into view

Here is some jQuery code I have: $(".col-md-12").hide(); $(".button-div").hide(); $(".featurette-divider").hide(); $(".footer").hide(); $(".first").fadeIn(1000); $(".second").delay(900).fadeIn(1000); $(".third").delay(1800).fadeIn(1000); $(".fourth").dela ...

javascriptjqueryhtmlcss

Is there a way to prevent the context menu from appearing when tapping on an image on a mobile phone?

When attempting to move an image on the screen with a touch event, a popup appears in Chrome when pressing and holding the image. This popup usually includes options to save the image. Is there a way to disable this popup so I can freely move the image w ...

javascripthtmlcss

How can I focus on a particular P element within this Div using CSS?

I am attempting to target a paragraph element within the code snippet below. I want to create a class that applies text-shadow to the text of that specific paragraph. However, I am unsure which class to focus on and what the correct syntax should be. I in ...

htmlcss

Customizing Bootstrap tooltip appearances with CSS

After successfully setting up Bootstrap 4.5.0, I decided to experiment with customizing the styles of tooltips. The code snippet below shows how I attempted this. Initially, I included the necessary stylesheets at the top of the page: <link rel=&q ...

htmlcsstwitter-bootstrapbootstrap-4tooltip

Incorporate Error Text Spacing in Input Group Design

I'm currently working on developing a method to incorporate space for error messages within my form input group component. The main objective is to prevent any displacement of elements on my forms when displaying error messages. In this scenario, it ...

htmlcssvue.jsbootstrap-4

Ensuring that two columns in Bootstrap 3 have equal heights while including padding

I would like to achieve this design without using JavaScript. Here is a screenshot for reference: This is what I have created so far using Bootstrap 3. The CSS is inline due to the use of less, which makes it easier :) HTML <section class="container ...

htmlcssheighttwitter-bootstrap-3css-tables

The page jerks as the carousel adjusts its height and content

There's an intriguing issue I'm encountering on my webpage with the bootstrap carousel wrapped inside a wrapper set as position:absolute. When the page is slightly scrolled down and the next carousel-item has a different height, the page abruptly ...

htmlcssbootstrap-4bootstrap-carousel

Creating an HTML table layout: A step-by-step guide

I am in need of assistance with designing an HTML layout. My goal is to display 3 columns for each table row as described below: Column #1 will contain text only. Column #2 will have an inner table, which may consist of 1 or 2 rows depending on the cont ...

htmlcss

Expanding space underneath for inline-block elements

Is there a way to create a page layout with inline-block elements that are vertically aligned to the top and fold into open space like floated elements do when placed below another set of inline block elements? It seems as though they follow row-like rules ...

htmllayoutcss

Error Message Border Exceeds Width Limit and Spans Over Two Lines in Regular Expression

While working on creating a lengthy RegEx error message using server controls, I had the idea to add some style by giving the message a background color and border. However, when I tried to add a CSS class to the server control with a border and color, th ...

c#cssasp.net.netservercontrols