Creating a Bootstrap 4 DIV element with horizontal scrolling functionality

I've been struggling to implement a horizontal scroll for a DIV on my site, but none of the common solutions like overflow-x or white-space:nowrap are working for me.

This is the section of my website where I need a horizontal scroll bar

If you want to see what I mean, check out my code below (I included extra CSS for clarity) or visit the site here.

.sidebar {
  background-color: #ececec;
  width: 3000px;
  /*overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;*/
}

.wallet {
  background-color: #7b67db;
  background-image: linear-gradient(120deg, #7b67db 0%, #ab8afb 50%, #FFFFFF 100%);
  width: 90%;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
  height: 167px;
  widows: 90%;
  margin: 0 auto;
}

.wallet-body {
  background-color: #fff;
  border-radius: 0 10px 10px 0;
}

.raise {
  font-size: 0.8em;
  color: #b8b8b8;
...

</html>

htmlcssbootstrap-4

Answer №1

To enhance the styling of this 

<div class="col-4 full-wallet float-left d-inline-block">
, I suggest removing the .float-left class.

Answer №2

.sidebar {
  background-color: #ececec;
  width: 3000px;
  /*overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;*/
}

.wallet {
  background-color: #7b67db;
  background-image: linear-gradient(120deg, #7b67db 0%, #ab8afb 50%, #FFFFFF 100%);
  width: 90%;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
  height: 167px;
  widows: 90%;
  margin: 0 auto;
}

.wallet-body {
  background-color: #fff;
  border-radius: 0 10px 10px 0;
}

.raise {
  font-size: 0.8em;
  color: #b8b8b8;
  padding-top: 8px;
  margin-bottom: 8px;
}

.fa-arrow-up {
  font-size: 0.8em;
  color: #b8b8b8;
  margin-top: -24px;
  margin-right: 56px;
}

hr {
  margin-top: 0;
  margin-bottom: 14px;
}

.balance {
  color: #697377;
  font-size: 0.8em;
  margin-bottom: -3px;
}

.amount {
  color: #697377;
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 20px;
}

.btn-depositar {
  background-color: #7b67db;
  padding: 10px 70px 10px 70px;
  border-radius: 50px;
  color: #fff;
}

.btn-depositar:hover {
  text-decoration: none;
  color: #fff;
  background-color: #5a50a5;
}

.currency-symbol {
  vertical-align: middle;
  margin-top: 40px;
  margin-left: 5px;
}

.addscrollbar{
    overflow-x: scroll;
    display: flex;
}
<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>

  <div class="row scroller">
    <div class="col-12 sidebar addscrollbar">
      <!-- Pesos -->
      <div class="col-4 full-wallet float-left d-inline-block">
        <div class="col-12 wallet pl-0 pr-0 mt-4">
          <div class="col-lg-2 d-inline-block wallet-side">
            <img src="images/dollar.png" alt="símbolo pesos" class="currency-symbol">
          </div>
          <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
            <p class="raise">CLP$999.999.999</p>
            <!--<i class="fas fa-arrow-up float-right"></i>-->
            <hr>
            <p class="balance">Balance</p>
            <p class="amount">$999.999</p>
            <a href="#" class="btn-depositar">Depositar</a>
          </div>
        </div>
      </div>
      <!-- /Pesos-->

      <!-- Bitcoin -->
      <div class="col-4 full-wallet float-left d-inline-block">
        <div class="col-12 wallet pl-0 pr-0 mt-4">
          <div class="col-lg-2 d-inline-block wallet-side">
            <img src="images/bitcoin.png" alt="símbolo pesos" class="currency-symbol">
          </div>
          <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
            <p class="raise">CLP$999.999.999</p>
            <!--<i class="fas fa-arrow-up float-right"></i>-->
            <hr>
            <p class="balance">Balance</p>
            <p class="amount">$999.999</p>
            <a href="#" class="btn-depositar">Depositar</a>
          </div>
        </div>
      </div>
      <!-- /Bitcoin-->

      <!-- Ethereum-->
      <div class="col-4 full-wallet float-left d-inline-block">
        <div class="col-12 wallet pl-0 pr-0 mt-4">
          <div class="col-lg-2 d-inline-block wallet-side">
            <img src="images/ethereum.png" alt="símbolo pesos" class="currency-symbol">
          </div>
          <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
            <p class="raise">CLP$999.999.999</p>
            <!--<i class="fas fa-arrow-up float-right"></i>-->
            <hr>
            <p class="balance">Balance</p>
            <p class="amount">$999.999</p>
            <a href="#" class="btn-depositar">Depositar</a>
          </div>
        </div>
      </div>
      <!-- /Ethereum-->

      <!-- Ethereum-->
      <div class="col-4 full-wallet float-left d-inline-block">
        <div class="col-12 wallet pl-0 pr-0 mt-4">
          <div class="col-lg-2 d-inline-block wallet-side">
            <img src="images/ethereum.png" alt="símbolo pesos" class="currency-symbol">
          </div>
          <div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
            <p class="raise">CLP$999.999.999</p>
            <!--<i class="fas fa-arrow-up float-right"></i>-->
            <hr>
            <p class="balance">Balance</p>
            <p class="amount">$999.999</p>
            <a href="#" class="btn-depositar">Depositar</a>
          </div>
        </div>
      </div>
      <!-- /Ethereum-->
    </div>
  </div>

</body>


</html>

Utilize the CSS properties overflow-x: scroll and display: flex in conjunction to create a container with a horizontal scrollbar when content overflows. Take note of the added .addscrollbar class for reference.

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 md-chips md-separator-keys with md-autocomplete: A step-by-step guide

My experience with using md-chips and md-autocomplete reveals an issue: when I incorporate md-separator-keys, it functions as expected. However, upon adding md-autocomplete, the md-separator-keys functionality ceases to work. This is how my code is struct ...

htmlangular-material

Adding an HTML tag attribute to a Bootstrap 5 popover using the setAttribute() method: A Step-by

Trying to include HTML tags in a popover setAttribute() function within Bootstrap 5, but the tags are displayed as content rather than being applied as attributes. <button type="button" class="btn btn-secondary mx-2" data-bs-containe ...

javascripthtmlbootstrap-5

React App Showing Scrollbar When Material UI AppBar is Present

I'm encountering a straightforward issue in my React application. How can I get rid of the scrollbar on my page? It seems like the problem arises from the height value I set to 100vh. However, upon removing the AppBar, the scrollbar disappears. Any su ...

cssreactjsmaterial-uireact-hooksstyled-components

Creating triangular side tabs with borders using CSS and HTML styling

I'm looking for a way to create triangle side navigation tabs similar to this example. I attempted using :after pseudo-element in my CSS: .tabs input + label:after{ content:""; float:left; position:absolute; top:0; right:-12px; width:0; height:0; bor ...

htmlcsstabs

Transforming button alignment from vertical to horizontal in Bootstrap based on the screen size of the device

My website features a series of vertically aligned buttons on the sidebar, styled using the following CSS: CSS: .sidebar { position: fixed; left: 20px; top: 5%; width: 120px;} .sidebar .icons { font-size: 30px; margin: 21px; } ...

htmlcsstwitter-bootstrap

How can I implement user-specific changes using Flask?

I am a beginner with Flask and I am working on a project where users can sign up, and if the admin clicks a button next to their name, the user's homepage will change. Below is the Flask code snippet: from flask import Flask, redirect, url_for, render ...

javascriptpythonhtmlcssflask

Favicon not appearing on Jekyll website

This is my first time working with Jekyll. I'm currently working on localhost and trying to set a favicon for the website. I generated the image.ico and added the code provided to my head.html file. The image appears in my _site folder, but it's ...

javascriptjqueryhtmljekyllfavicon

Bootstrap allows for multiple items to be displayed on the same line, creating

I am currently utilizing Bootstrap framework and have a total of four items. However, the last item is displaying beneath the other three items instead of being on the same line. The current code snippet is as follows: <div class="text-center linksblok ...

csstwitter-bootstrap

Steps to ensure that a particular tab is opened when the button is clicked from a different page

When I have 3 tabs on the register.html page, and try to click a button from index.html, I want the respective tab to be displayed. Register.html <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist"> <l ...

javascripthtmljquerycssbootstrap-4

What is the method for obtaining the total number of steps taken in a day (pedometer) exclusively for the current day on the

Is there a way to retrieve the total steps count for the current day only? The tizen.humanactivitymonitor.setAccumulativePedometerListener function allows me to access the accumulativeTotalStepCount, which represents the cumulative walking and running ste ...

javascripthtmltizen-wearable-sdk

Double Row Navbar Struggles in Bootstrap 4

I have been experimenting with creating two bootstrap navbars. The first one features the website's domain name in the center, accompanied by a dropdown menu to navigate to other sections. Each of these sections has its own subbar containing specific ...

htmlcssbootstrap-4navbar

What is the proper way to incorporate a hashtag (#) into a PHP parameter within a URL

Currently, I am sending a PHP request to a login handler using the following URL: https://example.com/test.php?username=test123&password=hiuhsda3#24 However, I need to retain the hashtag in either the password or username along with anything that come ...

phphtmlparametersrequesthashtag

Integrating external JavaScript widgets into the web application in real-time

I am currently engaged in a React js project that involves the dynamic addition of third party scripts (widgets) to the web app. These widgets encompass various third party platforms such as Twitter, Instagram, Youplay, Youtube, and more. The existing co ...

javascripthtmlreactjs

Motion graphics following the completion of a form input

In my HTML, I've created a div container with a form field: <div class="flex_item" id="b_one"> <form id="f_one"> <input id="i_one" type="text"> </form> </div> I'm attempting to change the backgroun ...

javascriptjqueryhtmlformsanimation

Implementing an active class to an element based on the current URL using Jquery in Django

Is there a way to dynamically add an "active" class to an element based on the href? This is what my template in Django looks like: <div class="panel side-panel-1 category"> <h4 class="title1">Sections</h4> <ul class="clear-list"> ...

jquerycssdjango

The Art of Positioning Containers in CSS

I am facing some issues with my CSS. In the JSP webpage, I have a container styled with a div that works perfectly. However, when I insert another div tag to style certain elements, those elements end up outside of the container for some reason. Below is ...

htmlcssjsp

Tips for choosing a specific cell in a table

I currently have a total of 14 cells that have been generated. Is there a way for me to individually select and manipulate a specific cell out of the 14? I am looking to make only one cell unique, while leaving the rest to be displayed as they are in the ...

javascripthtmlcss

Having difficulty with category level activation while implementing PHP page navigation with arrays and foreach loop

After receiving some excellent assistance from CBroe and @MeathCoder in a previous post, I managed to make some amazing changes. However, I'm currently facing an issue with setting the category as active. Here's the code snippet I'm working ...

phphtml

Basics of CSS border-image explained

Although it seems simple, I'm struggling to figure out what the issue might be. I am attempting to create a div with a specific border on an ASP.Net webpage. CSS: .ResourcesDiv { border-image:url(http://blogrope.com/wp-content/uploads/2013/06/003-w ...

htmlcssborder

Incorporate Thymeleaf's HTML using the powerful JavaScript framework, jQuery

I am facing an issue where the Thymeleaf rendered HTML code is not being displayed by the Browser when I try to insert it using JavaScript. $('<span [[$ th:text#{some.property.key}]] id="counter" class="UI-modern"> </ ...

javascripthtmljquerythymeleaf