How to add border on bootstrap 4 cards

Question

I am new to bootstrap and I would like to add cards to the default index page that is scaffolded when I start a new ASP.NET MVC project

My understanding is that bootstrap includes a border on the card. However, when I ran the application, the card border was not rendered.

I searched the web, of course, and found these two related question on SO: Bootstrap cards not showing like in examples What is the '.well' equivalent class in Bootstrap 4

I noticed in my project that it loads with bootstrap V3. Using NuGet, I uninstalled v3 and installed Bootstrap V4. I made sure the correct files were being loaded in the Bundle.config file as well. Still, the border was not rendered.

Here is my html code which is based on the default index page generated when creating a project:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

<div class="row">
  <div class="col-md-4">
    <div class="card border">
      <div class="card-body">
        <h2 class="card-title">Card title</h2>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <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>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    ...
  </div>
  <div class="col-md-4">
    ...
  </div>
</div>

The code I changed is in the first column of the row. (the ellipses in the other columns represent the code generated by visual studio). I added the border class but a border is not drawn in Chrome. I have also tried adding border border-primary but the border still does not render.

I fully expect to see a border around the card but cannot seem to get it working. Any assistance would be appreciated.

Are you sure you have given proper name of class for div is card border?? If not then make sure you use - between them to get the answer. — Dharmik Raval, Aug 05 '19 at 16:49
Did you overwrite any classes? I believe bootstrap renders a border on card by default. See https://bootstrap.build/app — VDWWD, Aug 05 '19 at 17:06

score 3 · Answer 1 · edited Aug 11 '19 at 01:44

I got this working. Adding the border class seems to have been the problem. I might have needed to recompile to get version 4 into the executable but in any event, using the example in the documentation on the Bootstrap web site rendered the border. Adding the border-primary class to the card element successfully changed the color. I think the critical lesson is that Bootstrap version 4 is needed and VS loads Bootstrap Version 3.

How to add border on bootstrap 4 cards

1 Answers1