Trimming the div tag from the bottom of the webpage

Currently utilizing bootstrap 4.0.0-beta.2 and encountering a CSS issue. In the specific layouthttps://i.sstatic.net/7WOGu.png Here is the HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
 <div id="task" class="container">
      <div class="row">
        <div class="col-12">
          <div class="card card-shadow">
            <div class="card-header accent-color">
              FOOOOOOOO
            </div>
            <div class="card-body">
              <h4 class="card-title">BAAAR</h4>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
              <a href="#" class="btn btn-primary btn-answer">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="card card-shadow" id="paint">
            <div class="card-header accent-color">
              paint
            </div>
            <div class="card-body">
              <app-paint></app-paint>
            </div>
          </div>
        </div>
      </div>
    </div>

Desiring to create a card layout where the first card maintains the width of col-12 and adjusts its height based on content. For the second div, I want it to always reach the bottom of the page without any margin between them. I attempted using position: fixed, bottom: 0, and height: 100%, but this caused the width to distort and not resize with the page. How can I ensure that the second div reaches the bottom of the page without these issues?

cssbootstrap-4

Answer №1

Utilize height and margins for proper layout.

The Bootstrap class .h-100 sets the height to 100%, but a parent element with a specific height is needed for percentage calculation (CSS added for HTML & body).

To position the second element at the bottom, use margin-top: auto and margin-bottom: 0. Bootstrap classes used: mt-auto mb-0

html,
body {
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container h-100"><!-- class added -->
  <div class="row h-100"><!-- class added -->
    <div class="col-12">
      <div class="card card-shadow">
        <div class="card-header accent-color">
          FOOOOOOOO
        </div>
        <div class="card-body">
          <h4 class="card-title">BAAAR</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
          <a href="#" class="btn btn-primary btn-answer">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-12 mb-0 mt-auto"><!-- class added -->
      <div class="card card-shadow" id="paint">
        <div class="card-header accent-color">
          paint
        </div>
        <div class="card-body">
          <app-paint>app-paint</app-paint>
        </div>
      </div>
    </div>
  </div>
</div>

Do you need the second div to expand?

html,
body {
  height: 100%;
}

.custom-flex {
  flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container flex-column h-100">
  <!-- class added -->
  <div class="d-flex flex-column h-100">
    <div class="">
      <div class="card card-shadow">
        <div class="card-header accent-color">
          FOOOOOOOO
        </div>
        <div class="card-body">
          <h4 class="card-title">BAAAR</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
          <a href="#" class="btn btn-primary btn-answer">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="d-flex flex-column custom-flex">
      <div class="card card-shadow custom-flex" id="paint">
        <div class="card-header accent-color">
          paint
        </div>
        <div class="card-body">
          <app-paint>app-paint</app-paint>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

To find the solution to this issue, I believe adjusting the CSS for the card is necessary. If you wish to modify the spacing between cards either at the top or bottom, consider altering the CSS in the following manner:

For adding a shadow to the card:

.d-flex [class*='card-shadow'] {
   margin-top: 2.5em;
   margin-bottm: 2.5em;
}

Feel free to use your preferred unit of measurement for CSS calculations such as em, px, or any other suitable option.

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

Tips for horizontally aligning a list with sublist using CSS

Is there a way to align a horizontal list with a sublist in HTML and CSS? I want the menu items (Home, News, etc.) to be on one line, with submenu items below them. HTML <body> <div class="menu"> <ul class="menu_l ...

htmlcss

Trouble with Bootstrap CSS buttons: color consistency problem persists

I am facing an issue with my Bootstrap button, which currently looks like this: https://i.sstatic.net/MWHYP.png The HTML code for the button in question is as follows: <button type="button" class="btn-primary.custom-btn" data-bs-to ...

htmlcsstwitter-bootstrapbootstrap-4

Issue arises when attempting to compile .less file with variables sourced from a separate file

I encountered an issue with my .less file where it contains definitions that rely on variables from another file. For example: body { font-family: @baseFontFamily; font-size: @baseFontSize; color: @textColor; } At first, IntelliJ displayed t ...

cssvariablescompilationlessnpm

Encountering an Issue with Incorporating Multiple SCSS files in Jekyll

Currently, I am in the process of developing a website using Jekyll. My goal is to incorporate multiple SCSS files into the project. Although I successfully added a main file, I have encountered some difficulties with additional files. Here is my director ...

csssassjekyll

Fixed position navbar toggler

Hey there! I currently have a centralized navbar layout for Desktop. However, my aim is to also center it on the mobile version. Basically, this navigation bar appears when scrolled downwards with icons like this. Therefore, I'm looking for assistan ...

htmlcsstwitter-bootstrap

Creating responsive tabs that transition into a drop-down menu for mobile devices is a useful feature for

I am looking to create a responsive tab design that drops down like the example shown below: Desktop/Large Screen View https://i.stack.imgur.com/hiCYz.png Mobile View https://i.stack.imgur.com/gRxLv.png I have written some code for this, but I am unsure ...

javascriptjqueryhtmlcss

Using @media queries for mobile and desktop: preventing desktop from displaying mobile styles

I have been working on redesigning a website for mobile using only CSS. I set up media queries to deliver the appropriate CSS for desktop and mobile devices. However, I noticed that when resizing the browser to under 855 pixels, some of the mobile CSS is ...

htmlcssmobilemedia

Ways to eliminate unnecessary spacing in CSS text-stroke

I am trying to achieve a text-stroke effect with transparent text over an image. However, I am facing an issue where the text-stroke also displays lines within the text itself. I am using the Montserrat font from Google Fonts. Can anyone provide assistance ...

htmlcsstextborder

Modify the appearance of a nested div using CSS hover on the main JSX container

Within the material-ui table component, I am dynamically mapping rows and columns. The className is set to clickableRow. The TableRow also includes a hover options div on the right side: const generateTableHoverOptions = () => { if (selected) { ...

javascripthtmlcssmaterial-uijsx

Issue with Bootstrap carousel: image protrudes past boundaries of parent container

Struggling with setting up a bootstrap carousel on my page. I want the image to extend beyond the parent div, positioned at the bottom rather than the top. How can I achieve this without disrupting the default carousel behavior? Here's a sketch of how ...

javascripthtmlcsstwitter-bootstrapcarousel

Implementing a delay in a CSS menu design while still ensuring compatibility with browsers that do not support JavaScript

I currently have a three-tiered menu that relies on :hover and is controlled by css alone. I am now looking to introduce a slight delay to the hovers, which means transitioning my css :hovers to a .hover class and incorporating jQuery. My concern is whet ...

jqueryhtmlcss

What is the best way to align text in the middle of a div using Foundation framework?

It seems like I may be either overanalyzing this or overlooking a small detail. The task at hand is to align text in the center within a div using Foundation. Here is the current code that I am working with: [1]<div class="row"> [2] <div class ...

htmlcsszurb-foundationcenteringtext-align

Is it possible to include custom icons and text within a column layout when the flex direction is set to row

Trying to create a single line clickable section with a play button, text, and YouTube video thumbnail. It's not rendering correctly even though the container is set as flex with row direction. Custom play button and properly sized thumbnail are in p ...

htmlcss

I'm having trouble setting the margin to 0 in Bootstrap 4. I'm only using CSS for styling and JavaScript for

Currently in the process of setting up a grid layout for a webpage under development. Encountering an issue with the .container class, that is supposed to contain all my div elements, not having any margin. Managed to remove the margin on the left side usi ...

htmlcssbootstrap-4

I'm struggling to determine the correct path to use in the background-image: url(); CSS property to display a specific image within a Vue.js project

Currently, I am working on a Vue.js project and this is the structure of my file tree (showing only relevant folders and files): root src assets image.jpg components header.vue index.html Within the header.v ...

css

The carousel spun around, each section moving to the side on its own

One issue I'm facing is that on my page, I have multiple carousel rows. However, when I click on the "next" or "prev" button to navigate through the items in the carousel, it affects all carousels instead of just the one I clicked on. I've attem ...

javascripthtmljquerycss.net

Gradually reveal each individual path of the SVG, one by one

I am faced with an SVG containing numerous paths like the following: <svg version="1.1" id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="drawing.svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://w ...

jquerycsssvgsvg-animate

Why is my image being stretched by flexbox instead of maintaining its aspect ratio?

One interesting aspect of Flexbox is how it handles image resizing. When you resize the width of an image within a flex container, the height does not adjust proportionally. This causes the image to appear stretched. div { display: flex; flex-wrap: ...

htmlcssflexbox

Encountering difficulties while trying to install reactstrap via npm

Currently diving into the world of React and experimenting with reactstrap for the very first time. After using the npm command to install React, here are the results: npm install reactstrap + <a href="/cdn-cgi/l/email-protection" class="__cf_email ...

reactjsnpmbootstrap-4npm-installreactstrap

Using ReactJS and SCSS to adjust the height: set the height to be twice the size of the element's

Is there a way to increase the height of a div each time it is clicked? I had an idea to add an extra CSS class to a div whenever a button is clicked. Here's how the concept might look: #divToBeDoubled { height: 100px; &.doubleHeight{ ...

cssreactjs