The line separating the card-img-top and card-body sections

I'm looking to add a border between the image and the card-body in a bootstrap card. Here is the CSS I currently have:

.card{
  border-width: 6px;
  border-color: rgb(255, 255, 255);
  border-radius: 0;
  background-color: transparent;
}

.card-body{
  border-top-width: 5px;
  border-top-color: rgb(255, 255, 255);
  border-radius: 0;
  color: rgb(255, 255, 255);
  text-align: center;
}

Here is the HTML:

<div class="col-md-4">
  <div class="card">
    <img class="card-img-top" alt="Depression" src="images/depression.jpg">
    <div class="card-body">
        <h3 class="card-title">DEPRESSION</h3>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</div>

Desired Outcome:

https://i.sstatic.net/Ec1nu.jpg

Current Result:

https://i.sstatic.net/YbMV0.png

Any assistance is greatly appreciated. Thank you.

csstwitter-bootstrapborderbootstrap-4

Answer №1

A border style is a necessary requirement for applying a border to an element. This information can be found here:

Please note: The other CSS border properties mentioned below will not have any effect unless the border-style property is defined!

If you want to implement a border, you can use the following code:

.card-body{
  border-top-width: 5px;
  border-top-color: rgb(255, 255, 255);
  border-top-style:solid;
  border-radius: 0;
  color: rgb(255, 255, 255);
  text-align: center;
}

Alternatively, you can simplify it like this:

.card-body{
  border-top: 5px solid rgb(255, 255, 255);
  border-radius: 0;
  color: rgb(255, 255, 255);
  text-align: center;
}

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

How can an accordion icon be added and list toggling be accomplished when HTML data is sourced from an API instead of a JSON response?

I have an API that sends HTML data as a response. The task at hand is to add accordion icons to the items in the list and enable list toggling using HTML, CSS, JavaScript, React, and MaterialUI. Unfortunately, I am limited in my options and cannot use JQ ...

javascripthtmlcssreactjsmaterial-ui

Tips for incorporating a zoom feature into a bootstrap carousel

I've been attempting to incorporate a zoom effect into a bootstrap carousel, but for some reason, I can't seem to get it to work :( I suspect that I may need to insert the syntax into the core _carousel.scss file (or maybe not?). Despite my atte ...

jqueryhtmlcsssassbootstrap-4

Creating Bootstrap columns with equal height and a button

My HTML Code looks like this: <div class="row align-items-center" style="margin: 0; padding: 0;"> <div class="col-4" style="background-color: red; margin: 0; padding: 2px;"> <a href="#"><button style="width: 100%;">Test< ...

htmlcssbootstrap-4

Tips for utilizing CSS flexbox to create a row of squares that can scale while maintaining their aspect ratios

Struggling with this issue has me on the verge of pulling my hair out. It seems like a simple task, yet I can't seem to achieve perfection. My goal is to create a row of squares that maintain their aspect ratio but scale down in size as their containe ...

htmlcssflexboxcss-gridresponsive

The div's coloring extends beyond the margins

My page is set at a width of 970px. Everything looks good, with the paragraph aligned within the margin. However, when I try to apply color, it extends outside the margin. <div class="container"> <header> <nav c ...

htmlcsstwitter-bootstrap-3margin

The <img> tag is displaying with dimensions of 0 x 0 pixels even though its size was specified

Is there a way to control the image size within an <img> tag placed inside an html5 video element? Currently, it keeps defaulting back to 0 x 0 pixels. The reason behind using this img is to serve as a fallback for outdated browsers where the video ...

csshtmlimagehtml5-video

jQuery allows you to hide a div when the mouse leaves it

HTML <div class="container"> <div class="section" id="block1">Section-1</div> <div class="section" id="block2">Section-2</div> <div class="section" id="block3">Section-3</div> <div class="sectio ...

jqueryhtmlcsshidemouseout

Alert: The specified task "taskname" could not be located. To proceed with running grunt, consider using the --force option

My current task involves converting .css files to .sass files using the 'grunt-sass-convert' npm module. Here is the configuration in my 'Gruntfile.js': 'use strict'; module.exports = function(grunt){ grunt.loadNpmTasks( ...

cssnode.jsnpmsass

The overflow of CSS text selection color spills beyond the boundaries of the box

I'm just starting to learn CSS and was wondering if there is a way to prevent the text selection color from extending into the 'gutter' (I believe that's the correct term) like shown here: It may seem trivial, but I've observed th ...

css

How can I feature an image at the top of the page with large 3 and jQuery in FireFox?

I am interested in showcasing a single image at the forefront of the page when it is selected. While there are numerous plug-ins that offer this feature, many come with unnecessary extras like galleries, video support, and thumbnails which I do not requir ...

javascriptjqueryhtmlcssfirefox

Preventing hover from automatically setting a value in a Typeahead input with the Bootstrap Typeahead.js plugin: A guide

In my ASP.NET MVC application, I am using the Bootstrap Typeahead plugin from this source. The typeahead in my application looks like this: https://i.sstatic.net/AYAGy.jpg When I hover over the items in the list without clicking, it does not select them ...

jquerytwitter-bootstrapbootstrap-4typeahead.jstypeahead

Styling in CSS to ensure scrollbar is constantly displayed without narrowing the container's width

Is it possible to have a vertically scrollable div with an always visible scrollbar without the scrollbar affecting the width of the elements inside? I attempted some CSS modifications, but the scrollbar still reduced the available width of the div. Is th ...

htmlcssstylesheet

The JavaScript code appears to be missing or failing to execute on the website

Encountering a console error while trying to integrate jQuery into my website. The JavaScript file is throwing an error in the console that says: Uncaught ReferenceError: $ is not defined catergory.js:1 Even after following the suggested steps in this an ...

javascripthtmljquerycss

I am facing an issue where my Popover functions correctly when elements are added using HTML, but not when they are dynamically created

I'm currently working on a method to incorporate multiple popovers that have a similar appearance to the following: The screenshot of my first JsFiddle project (click to view) The initial progress I've made can be seen in my first JsFiddle, acc ...

javascriptjquerycssbootstrap-4jsfiddle

Having difficulty positioning breadcrumb items to float on the right side

As I create my Vue.js and Bootstrap application, I am working on a breadcrumb feature that presents some challenges. Specifically, I am trying to align the icons to the right while ensuring that the text "Files" remains floated to the left. <script s ...

htmlcsstwitter-bootstrapvue.jsbootstrap-4

Top tips for optimizing HTML and utilizing div elements

Could you please provide some insights on how to effectively utilize HTML5 in conjunction with div tags? Below is the snippet of my HTML code. I am incorporating the article tag and have segmented sections, which seem to be in order. However, I am also ...

csshtml

Is there a way to use a media query on a div element to check for the presence of a scroll bar?

A div has been styled with overflow-y: auto, triggering the appearance of a vertical scroll bar when the content exceeds the height of the div. This causes the content to shift horizontally to accommodate the scroll bar, resulting in misalignment with the ...

csssassmedia-queriesscrollbar

Using both Angular material design and Bootstrap together can provide a seamless

Is it feasible to integrate material design into an Angular app alongside bootstrap without any complications? I am aiming to leverage the grid system of twitter-bootstrap and incorporate the dialogues from material design... ...

twitter-bootstrapangularangular-material2

Is the current version of Bootstrap experiencing issues with Data-bs-toggle functionality?

I have encountered an issue where the bootstrap 5.1.3 data-bs-toggle feature is no longer functioning properly. For example: <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" datadat-b ...

javascriptbootstrap-4bootstrap-modalangular-ui-bootstrapreact-bootstrap

Implement Bootstrap globally in your React application using css modules

Just diving into the world of React and need some guidance. Recently, I integrated the https://github.com/gajus/babel-plugin-react-css-modules plugin into my project to use local CSS files with components. Now, I want to incorporate Bootstrap for the enti ...

reactjsbootstrap-4css-modulesbabel-plugin-react-css-modules