Bootstrap Scrollable Card

Currently, I am working with bootstrap 4 and have set up a layout with 3 columns in a single row. One of the columns contains a list while the other two do not. I am trying to make only the column with the list scrollable without affecting the entire container. In other words, I want the scrollbar to appear only within that specific column.

If anyone has any suggestions or solutions on how to achieve this, they would be greatly appreciated.

<div class="row">
<div class="col-sm-4">
  <div class="card">...

<div class="col-sm-4">
  <div class="card">...

<div class="col-sm-4">
  <div class="card">...

</div>
cssbootstrap-4

Answer №1

One possible solution is as follows:

    <div class="row">
      <div class="col-sm-4">
        <div class="card">...</div>
      </div>
      <div class="col-sm-4 scroll">
        <div class="card">...</div>
      </div>
      <div class="col-sm-4">
        <div class="card">...</div>
      </div>
    </div>

After that, add the following to your CSS file:

.scroll {
    max-height: 100px;
    overflow-y: auto;
}

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

Assistance needed in creating a MVC3 and Razor 2-level horizontal navigation menu

I am attempting to create a 2-level horizontal menu, similar to the one featured on the following site: TV.Com Despite searching on google, I am struggling to put it all together. Below is the sample code I am working with: <div id="divNav"> <u ...

cssasp.net-mvc-3razor

HR | extends all the way down the table, creating a vertical boundary

I am currently working on developing an Email Signature Generator. My goal is to extend the blue line (visible in the program) all the way down without affecting the layout of other elements. I suspect that because everything is contained within a table, a ...

htmlcss

What are the steps to ensure that data retrieved from an API is accurately displayed in a table?

My current goal is to collect data from the crypto compare API and display it in a table format. Although I am able to generate the necessary elements and append them to the table body, I am facing an unusual issue. Each time I use a for loop to iterate th ...

javascriptjqueryhtmlcss

Clicking on text within a DIV using jQuery

How can I use jQuery to show an "alert" when text inside a DIV is clicked, excluding images and other tags? The texts are contained within various DIVs along with images and tags. Is there a way to achieve this using jQuery? Check out the jsFiddle example ...

jquerycsshtmlselect

How to Use the env() Variable in CSS Styling?

Operating on React with Material-UI, my web app features a bottom nav bar. For certain devices like the latest iPad, I must allocate an additional 8 pixels below it to account for the horizontal gray bar that substitutes for a home button: https://i.sstat ...

cssreactjsmaterial-uicss-variablesemotion

Google Web Fonts: Exploring the World of Font Weight Variations

It's quite puzzling as to why the weight of my Google web font in the navigation menu keeps changing on different pages even though I have specifically set it to 700. The CSS for the menu is exactly the same across all pages. Can anyone shed some ligh ...

htmlcssfontsfont-sizegoogle-webfonts

- Challenges with internal systems

I have a dialog window where I want to display a confirm dialog when clicking Cancel. To achieve this, I am creating a div element with some text that should be shown in the confirm dialog. However, the issue I'm facing is that the text intended for t ...

javascriptjqueryhtmlcssmodal-dialog

Is there a way to modify the color of multiple disabled select fields in Internet Explorer?

After experimenting with various methods to change the color of disabled select items, I found success in Chrome but hit a roadblock in IE. Despite trying ::ms-value, the red color was applied to all disabled select fields, which was not the desired outcom ...

htmljquerycss

Styling in Next.js with conditions

I am attempting to create a scenario where a link becomes active if the pathname matches its href value. function Component() { const pathname = usePathname(); return ( <div className="links"> <Link href="/"> ...

cssnext.js

Solved the issue of inconsistent element height and jumping on mobile devices during scrolling

Problem persists with the fixed element at the bottom of my mobile device when I scroll. It seems that the height is recalculated each time due to an increase in document height on mobile devices. The issue appears to be related to the address bar fading ...

htmlcss

The size of the popup does not align properly with the content within it

After creating an extension for Chrome, I specified the dimensions of the popup to be 600 x 300 px. Everything was working perfectly until Chrome updated to version 27. As shown in the screenshot, I set the width and height using CSS, but there is still a ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Position the float input to the right on the same line as an element

This Angular code contains a challenge where I aim to have text at the start of a column and an input box on the right side of the page, both aligned on the same line. The issue lies in the code which floats the input to the right but disrupts the alignme ...

htmlcssangular

Unable to apply styling to body element in style.css file when using Node.js

I recently launched a basic Node.js website but encountered an unusual issue. When trying to style the body using the default style.css stylesheet provided by Express, I found that it was not recognizing it. The only workaround was to add the class body di ...

htmlcssnode.jsexpressmean-stack

Transform Typescript into compiled css files without using any additional tools

Currently, I am working on a monorepo project where the main project relies on another project called components. When running the entire monorepo, the main project utilizes webpack.dev while the components project simply uses the TypeScript compiler. It l ...

csstypescriptwebpack

Is it possible to highlight only a specific color on the div background?

I'm trying to create a layout similar to this: https://i.sstatic.net/dZ1ka.png I've managed to get most of it working, but I'm struggling with the yellow rectangle that spans the background of the screen. Currently, it looks like this: https ...

htmlcssreactjs

The sub-menu positioning feature functions properly in Chrome and Safari, but is not compatible with Internet Explorer and Firefox

Working on a website for a gaming community, known as http://www.quad-gaming.com/. All is running smoothly except for the dropdown menu under "Login" on the right side of the navigation bar. It behaves properly in Chrome and Safari, but in IE and Firefox, ...

htmlcssmenunavigationsubmenu

Adding padding to the top causes the scrollbar to hide at the bottom in Firefox

My HTML page includes the following configured DIV: <div id="contentDiv" style="padding-top: 20px; padding-left: 20px; overflow: auto; height: 100%;" > The content within this DIV is large enough to require a vertical scrollbar. When viewed in IE, ...

cssfirefoxscrollbarpadding

Scrolling text blocks on mobile devices

When viewing the website on a desktop, everything works perfectly. However, when accessing it on a mobile device and trying to scroll down, only the text moves while the page remains stationary. The website utilizes skrollr core for animations. I have alre ...

javascripthtmlcssanimationscroll

Developing a single page that caters to various users' needs

Greetings to all my friends, As a front end developer, I am in the process of implementing a dashboard for a project that involves different users with varying permissions. Each user should only have access to certain parts of the page, resulting in some ...

javascripthtmlcssjsp

An element will not automatically wrap text when all anchors are in place

http://jsfiddle.net/awWmY/ I've been struggling to figure out why the text won't wrap to #bigEnough. Can anyone help me with this simple issue? html{background:black;} #bigEnough { width: 500px; text-wrap: normal; } #bigEnough a { -moz-t ...

htmlcss