Thickness of Border in Bootstrap Cards

I've been attempting to include a thicker border around the entirety of my Bootstrap 4 card. Despite specifying a thicker border, nothing seems to change. Below is a snippet of the code I'm working with: 

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-3">
            <div class="card h-100">
                <img src="img/html.jpg" alt="HTML" class="card-img-top " style="display: block">
                <div class="card-block">
                    <h3 class="card-title"> Projects </h3>

                    <p class="font-weight-light"> hello world hello worldhello worldhello worldhello worldhello world</p>
                    <form action="https://www.w3schools.com/html/">
                        <button type="submit" class="btn btn-danger btn-lg btn-block">Learn More</button>
                    </form>
                </div>
            </div>
        </div>

Below is the CSS portion:

.card {
     border-style: 5px solid black;
     padding-bottom: 3%;
 }

 .row {
     padding-bottom: 15%;
 }

Any suggestions on what adjustments could lead me to the desired outcome?

Appreciate any help.

cssbootstrap-4

Answer №1

border-style is not a valid property when combining styles. Instead, use border for it to work correctly.

 .container {
     border: 3px dashed blue;
 }

See Example

Answer №2

<div class="box" style="border: 2px solid #07bc4c"></div>

It did the trick!

Answer №3

Using CSS for Styling

Instead of specifically setting the border style with border-style, you can achieve the same result by using border: 5px solid black;. Here's how your code will look:

.card {
     border: 5px solid black;
     padding-bottom: 3%;
 }

Bootstrap Method

If you're working with Bootstrap 5, you have the option to apply a border using the bootstrap class border border-5 directly on your card element. This is how your final output will appear:

<div class="card h-100 border border-5">
</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

The style of the dataTable can be customized with attributes such as color, background color, border

Is there a way to customize the appearance (such as color, background color, border, hover effects, etc.) of a dataTable using reactjs? Check out this dataTable image for reference. ...

reactjsbootstrap-4datatable

Creating Positioning Magic with HTML Elements

Currently working on an ASP.NET web app that utilizes a Master, with just a GridView at the bottom and a DIV at the top for further development. The goal is to keep the top DIV or header fixed while scrolling, ensuring it remains in place at the top of th ...

javascriptjqueryhtmlcssasp.net

How can I prevent a nested Table from inheriting the style of the parent table?

Just to clarify, I'm not using tables or any other styling methods like that on my page. I have a simple table that lists services, prices, and PayPal buttons for adding to the cart. While everything is functioning properly and looks good, there are ...

csscss-tables

Styling TD with CSS for bottom border

Is there a way to adjust the bottom border of a TD element in CSS? The image provided demonstrates the desired effect, but with a slight overhang. I need the border to align perfectly with the width of the blue cell above it. https://i.sstatic.net/OXhJu.j ...

htmlcss

Different ways to position 3 images side by side and ensure they are centered on the

I am struggling to center 3 images horizontally on my webpage. Despite aligning them in a row, I cannot seem to achieve the desired centering effect. I have tried various methods to center the images, but nothing seems to work effectively. My goal is to ...

htmlcss

What are the buttons featured in the header of this mobile-friendly bootstrap panel

Can anyone offer advice on how to make a bootstrap panel header responsive? The panel has a title with several buttons on the right side. While it looks good on a large screen, it becomes messy on smaller browser sizes. You can find my complete code here ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

When used, the jQuery selector returns the PreviousObject rather than the object that was selected initially

I'm currently attempting to add a second menu to my website alongside the top menu. I have multiple menus set up in two bootstrap columns (col-8 and col-4). Initially, when I used jQuery selectors outside of a function, everything worked smoothly. How ...

javascriptjquerycss

What is the best way to arrange a bootstrap .container?

I've been struggling to position a content DIV on a bootstrap carousel, but so far I haven't been successful in figuring it out. Below is a screenshot of the current output from my code, which is not what I am aiming for. What I'm trying t ...

htmlcsstwitter-bootstrapcss-position

How can I adjust the font size of material-ui buttons while ensuring that they scale appropriately?

Having trouble adjusting the font sizes on Material-UI's RaisedButton for React and ensuring that the button scales properly along with it. <RaisedButton label={<span className="buttonText">Log in Here</span>} /> CSS: .buttonText ...

javascriptcssreactjsmaterial-uijsx

"Change the value of a style setting in React to 'unset

One of the components has CSS properties such as `right` and `bottom` that are set with a classname. I tried to override these values using the `style` prop but have only been successful in setting numerical values like `10px` or `0px`, not `unset`. Wha ...

javascripthtmlcssreactjs

Press and hold feature using CSS or JavaScript

When working with a jQuery draggable element, my objective is to change the cursor to a move cursor when clicking and holding the header. I have attempted using CSS active and focus properties, but so far no changes are taking place. ...

javascriptjquerycss

Finding a nested HTML element within a frame using Selenium without the presence of an iframe

Currently, I am delving into the world of Selenium using python to automate form filling on a particular website. However, my efforts have hit a roadblock as I am struggling to identify any elements within a frame and encountering a dreaded NoSuchElementEx ...

pythoncssseleniumframewebdriverwait

Can the styling and variables of Bootstrap4 be altered dynamically?

I have recently started working on a project that utilizes Bootstrap4 for design and layout. However, there is now a need for the ability to change certain core styles (such as font-face, primary color, and background color) dynamically at runtime. Curren ...

csssassbootstrap-4themesmeteor-blaze

Transfer the information of a selected element to a different element

Hello, I am trying to transfer content from a child element to another element. In my HTML setup, there is a hidden div named "DetailsExpanded" and multiple items called "IconWrapper". When an "IconWrapper" is clicked, I want to copy the content of its "I ...

javascriptjqueryhtmlcss

Having trouble with the full-screen feature not functioning properly?

I am currently in the process of creating a custom video player and I need to include a full-screen button. However, when I click on it, the video does not expand to fill up the entire screen. I am using javascript, css3, and html5 for this project. Any as ...

javascripthtmlcss

Items within a shared container are currently displaying stacked on top of each other

I am facing an issue with my bike images and manufacturer names appearing on top of each other instead of next to each other. Despite using "col-md-12", the grid columns are not aligning horizontally as expected. How can I adjust the code so that each imag ...

cssangularjstwitter-bootstrap

Tips for automatically resizing a canvas to fit the content within a scrollable container?

I have integrated PDF JS into my Vue3 project to overlay a <canvas id="draw_canvas"> on the rendered pdf document. This allows me to draw rectangles programmatically over the pdf, serving as markers for specific areas. The rendering proces ...

javascripthtmlcssvue.jscanvas

Adjust the height of the `<input type="file">` element to match the containing div by utilizing Bootstrap 4.5 styling

Can I update the .html file to give the "Choose File" and "Upload" options the same height as the "Upload" button in the second div, which has the py-4 tag? <div class="input-group"> <div class="custom-file py-4"> < ...

htmlinputbootstrap-4height

Unable to include an additional parameter within a JavaScript function

I'm having trouble adding a parameter to the Openpopup() function - every time I try, I get an error. Can someone help me out with this? Thanks in advance. return "<a onclick='return Openpopup()' class='btn btn-info btn-lg clickBtn& ...

javascriptjquerycssasp.net

Optimize your bootstrap carousel for mobile viewing by ensuring that the image and text are

My bootstrap carousel is displaying perfectly on desktop screens with images sized at 1200x400. However, when viewed on mobile devices, the images shrink so much that the text on them becomes unreadable. Additionally, the navigation dots at the bottom of t ...

htmlcsstwitter-bootstrap