How to create a scrollable card within a div using bootstrap

How do I create a scrollable card in Bootstrap 4 with this specific HTML structure:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="wrapper">
  <div class="sidebar">
    ....
  </div>
  <div id="content">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      ...
    </nav>
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Privacy Policy</h5>
        <p class="card-text">Use this page to detail your site's privacy policy.</p>
        ... (repeated text)
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

The sidebar is on the left side of the screen, and the wrapper utilizes display: flex for this layout. My goal is to make only the .card section scrollable when overflowing the height of #content, without affecting the scrollability of the rest of the page content.

htmlcssbootstrap-4

Answer №1

These are the recommended styles

.container {
  display: flex;
}
.sidebar {
  height: 100vh;
  overflow-y: auto;
}
#main-content {
  flex-grow: 1;
}
#main-content .box {
  overflow-y: auto;
  height: calc(100vh - 40px); /* Total height - navbar height*/
}

This setup mirrors the sidebar layout found on Bootstrap's official website.

.container {
  display: flex;
}

.sidebar {
  width: 200px;
  height: 100vh;
  overflow-y: auto;
}

#main-content {
  flex-grow: 1;
}

#main-content .box {
  overflow-y: auto;
  height: calc(100vh - 40px);
  /* Total height - navbar height */
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container">
  <div class="sidebar">
    Sidebar Content
  </div>
  <div id="main-content">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      ...
    </nav>
    <div class="box">
      <div class="card-body">
        <h5 class="card-title">Privacy Policy</h5>
        <p class="card-text">Content goes here.</p>
        <a href="#" class="btn btn-primary">Click Here</a>
      </div>
    </div>
  </div>
</div>

Answer №2

Have you attempted implementing the following code snippet in your CSS Stylesheet?

.container #main .item{
overflow-y: scroll;}

This code will apply a scrolling feature in the vertical direction specifically to the designated item. Another approach would be to use: 

<div class="item" style="overflow-y: scroll;">

Answer №3

Make sure to set the overflow-y property to auto. Additionally, you can specify a max-height value to constrain the card div.

style="max-height: 100px; overflow-y:auto"


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="wrapper">
  <div class="sidebar">
    ....
  </div>
  <div id="content">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      ...
    </nav>
    <div class="card" style="max-height: 100px; overflow-y:auto">
      <div class="card-body">
        <h5 class="card-title">Privacy Policy</h5>
        <p class="card-text">Use this page to detail your site's privacy policy.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

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

Concealing a Div on Click Outside of Child Div in ReactJS

I have a parent div with a child div in the center. I am trying to figure out how to close the parent div only when clicking outside of the child div. My current code is structured like this, using triggerParentUpdate to control whether the div should be d ...

javascripthtmlcssreactjs

Invoking a function within an HTML file does not result in triggering an alert message

Hello everyone, thank you for taking the time to look at this. I'm attempting to execute a javascript function when I click on the update button. Here is the javascript code: var text2Array = function() { // This function takes the value from the t ...

javascripthtml

What's the best way to ensure that a div remains fixed at the top of the page while also being centered?

I have a div that I've centered using margin left and right auto. However, I want this bar to be visible throughout my page, so I positioned it absolutely. But now the bar is not centered anymore, it's appearing on the left. How can I position th ...

htmlcss

Error encountered: The Bootstrap Carousel function is causing a TypeError as e[g] is not defined

I am attempting to build a dynamic bootstrap carousel using my json data, and I have implemented jQuery-Template for rendering. Essentially, I am generating the carousel slider on-the-fly from my json data with the help of jQuery-Template. Here is a snippe ...

javascriptjqueryhtmltwitter-bootstrapjquery-templates

Error: Invalid Argument - The argument 'PanelController' is expected to be a function, but it is undefined

Here is a snippet of my HTML code: <body ng-controller="StoreController as store"> ........... <section ng-controller="PanelController as panel"> <ul class="nav nav-pills""> <li ng-class="{active:panel.isSe ...

javascripthtmlangularjs

Design a styled rectangular tab using CSS

Does anyone know of any cool CSS techniques for achieving the tabbed rectangle appearance depicted in the image below? While it's clear that accomplishing this with just one div is not possible, is there a more efficient method than layering one div ...

csstabs

When the mouse hovers over, include a fade-in effect for the image

I am working with two overlapping images and have successfully implemented a function to display the second image on mouse hover. However, I am struggling to incorporate a CSS transition property for a smoother image transition effect. Currently, when the ...

htmlcssreactjsanimationhover

What strategies can I use to include multiple spans within div elements without causing the code to become overly lengthy?

I'm working with 20 spans representing movie genres, each accompanied by another span that "closes" the genre when selected. The closing span has an .active class, similar to this example: https://i.sstatic.net/7CuuX.png My version currently looks li ...

htmlcss

What steps should be taken to populate a grid row if a certain div element is not present?

I am currently using tailwindcss and have this specific HTML code snippet: REPL: https://play.tailwindcss.com/L8McFjGBVC <div class="grid grid-cols-12"> <div class="col-span-4 bg-red-300">1</div> <div class=&qu ...

htmlflexboxtailwind-csscss-grid

Risks associated with working with position:relative and left/top in web development

When using position: relative; with multiple elements, are there any potential issues to be aware of? Unlike position: absolute;, which may not display correctly on different monitors. For example: <img src="blah.png"/ class="someClass"> <im ...

htmlcsscss-position

Creating a table with a static first column and vertical text positioned to the left of the fixed column

To create a table with the first column fixed, refer to this fiddle link: http://jsfiddle.net/Yw679/6/. You also need a vertical text to be positioned to the left of the fixed column in a way that it remains fixed like the first column. The disparities be ...

javascriptcss

Do you believe that using bower to install HTML5Boilerplate is a beneficial decision?

Is it recommended to use HTML5 Boilerplate with Bower for installation? What steps should one take afterwards, considering that it has its own directory structure for CSS and JavaScript, leading everything to be contained under bower_components/html5boil ...

htmlnpmbowerhtml5boilerplate

django-avatar // insufficient amount of values for decomposition (anticipated 2, received 1)

Visit the Django Avatar documentation here Encountering an error in Django stating "not enough values to unpack (Expected 2, got 1) while attempting to open a specific html template: {% extends 'base.html' %} {% load account %} {% load avatar_ta ...

pythonhtmldjangodjango-templates

How to align text to the right with ellipsis and button in a ReactJS component

In a specific scenario, I need to display a button on the right corner of the header. The selected filter value should appear next to the filter button like this: | Between 01/23/2018 and 07/30/2018 {button}| As the user changes the screen size, I want to ...

htmlcssreactjsellipsis

Is there a substitute for HtmlUnit on Android?

Is there a different solution available that can help me complete an HTML form containing checkboxes and radio buttons? I was in the process of developing an Android application that requires user input, sends the data to a website with an HTML form, fill ...

javaandroidhtmlseleniumhtmlunit

Incorporating HTML/PHP elements into JQuery

I am currently working on a website project for a manufacturing company that involves PHP, HTML, CSS, and JQuery. My goal is to create a seamless user experience where they can easily contact sales representatives for quotes and other information by clicki ...

phpjqueryhtmlinclude

Tips for preventing the parent element's height from fluctuating when displaying a child div using v-if

I have a main container and an inner container. The inner container is displayed using v-if. I want to include a transition effect on the inner element, but after the transition ends, the height of the parent container changes abruptly and looks unattracti ...

cssvue.jsvuejs2vue-componenttransition

Attempting to align the fixed banner in the middle of my blog

I have spent hours combing through code after code on this site, trying to center my fixed banner without success. I am feeling frustrated and in need of some assistance. Here is the CSS snippet I have been working with: .heading { position:fixed; ...

csscentertumblrfixedbanner

Utilize the HTML Tidy executable in combination with PHP, as opposed to compiling it

I have created a PHP application specifically for shared hosting environments. Dealing with the inconsistency of hosts providing HTML Tidy can be challenging for me. Is there a way to integrate the tidy executable directly into my PHP application and proce ...

phphtmlshared-hostingtidy

Creating a user authentication portal

Looking for advice on creating a basic front end HTML login. I'm new to coding and would appreciate any suggestions! Additionally, how can I link the login system to my database? ...

html