Issue with borders not displaying on cards in Bootstrap 3.4.0

In the 3.4.0 version of Bootstrap, I am facing an issue where cards are not showing borders. I am attempting to include multiple cards within a panel.

I have tried using the "!important" property for the border, as well as using classes like "border-primary" and "mb-3."

<div class="panel panel-default">
  <div class="panel-heading" style="height: 30px; padding: 5px">
    <h4 class="panel-title">
      <a class="accordion-toggle" role="button" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" style="font-size: 20px; padding: 0 20px" aria-controls="collapse4">
Features </a>
    </h4>
  </div>
  <div id="collapse4" class="panel-collapse collapse in">
    <div class="row">
      <div class="col-sm-6" style="padding-left:30px">
        <div class="card border-primary mb-3">
          <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="card border-primary mb-3">
          <div class="card-body">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I am in need of a solution to display cards with borders in Bootstrap.

htmlcsstwitter-bootstrap-3

Answer №1

  • If you're looking for a quick fix, simply include 
    .border-primary { border: 1px solid #007bff; }
    in your CSS file. Here's a snippet to demonstrate:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<div class="panel-heading" style="height: 30px; padding: 5px">
<h4 class="panel-title">
<a class="accordion-toggle" role="button" data-toggle="collapse"
data-target="#collapse4" aria-expanded="false"
style="font-size: 20px; padding: 0 20px" aria-controls="collapse4">
Features </a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse in">
<div class="row">
<div class="col-sm-6" style="padding-left:30px">
<div class="card border-primary mb-3">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to 
additional content.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-primary mb-3">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to 
additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>

<style>
  .border-primary { border: 1px solid #007bff; }
</style>

  • Alternatively, you can experiment with a different version of Bootstrap.

Hope this solution works for you.

Answer №2

Initially, the transition from using .panels to .cards occurred in bootstrap 4.x, meaning that cards were not present in bootstrap v3.4.0

It is important to use either .panels with bootstrap v3.4.x or .cards with bootstrap v4.x, without mixing the two components.

To demonstrate, all instances of panels were swiftly replaced with cards using bootstrap v4.x, eliminating the need for inline CSS in the process. Below is the outcome (view demo):

Does this align with your requirements?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="card card-default">
  <div class="card-heading">
    <h4 class="card-title">
      <a class="accordion-toggle" role="button" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" style="font-size: 20px; padding: 0 20px" aria-controls="collapse4">
Features </a>
    </h4>
  </div>
  <div id="collapse4" class="card-collapse collapse in">
    <div class="row">
      <div class="col-sm-6">
        <div class="card border-primary mb-3">
          <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">
              With supporting text below as a natural lead-in to additional content.
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="card border-primary mb-3">
          <div class="card-body">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">
              With supporting text below as a natural lead-in to additional content.
            </p>
          </div>
        </div>
      </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

Customizing Bootstrap CSS

In my recent code, I included a bootstrap css reference in this manner: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5T ...

htmlcssbootstrap-4

What could be causing my radio button list to stop functioning correctly? (After applying CSS)

While working on a simple postage calculator in Visual Studio with Web Forms (yes, we had to use Web Forms in Class), I included some Bootstrap for styling. However, there was an issue where my RadioButtonList suddenly stopped functioning properly. None ...

c#htmlcssasp.netradiobuttonlist

How to create a dynamic background color animation in jQuery similar to a progress bar animation

I have a container with text content (for example: My Name) and it is displayed in a RED background color along with a button. What I am looking for : When the button is clicked, I want to change the background color of the container from RED to BLUE, si ...

jquerycssjquery-uiprogress-barjquery-effects

Fixing the slide bar in React using styled components

In the early stages of creating a slider where cards (divs) can be moved left and right with a click, I encountered an issue. The onClick handler is functioning properly. However, upon running the project, I noticed that the cards start 230px away from the ...

javascriptcssreactjsfrontend

Add a circular transition effect to Font Awesome icons

Check out my code snippet on JSFIDDLE: https://jsfiddle.net/8f3vLh0a/14/ I am using font awesome icons and I would like to add a circling effect on hover similar to this demo: http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/ How can I implement t ...

htmlcss

Searching for hidden elements within a div using a filter option

An accordion is located inside a div and a search box has been added to the div with the intention of serving as a search filter. Some accordion elements are visible within the div while others are hidden. The problem arises when trying to make the filter ...

javascriptjqueryhtmlcss

Troubleshooting: Custom icons not displaying in Next.js application

Every time I attempt to use icons that I have loaded into my source code, I keep getting this default icon displayed: https://i.sstatic.net/AWhcW.png I'm uncertain about what exactly is causing this issue. Here is the layout of my file tree for ref ...

htmlcssreactjsnext.js

Transform a span into a div while retaining its content and styles, ensuring compatibility with Internet Explorer

Is there a reliable JavaScript method to convert a span into a div while preserving its contents and the original classes of the span? The classes are pre-set, so hardcoding should be possible. <span class="my class"> <p class="conten ...

javascriptjqueryhtml

Modifying the color of a div based on a specified value using JavaScript

<div id="navigation"> Add your text here </div> <input type="text" id="newColor"><button onclick="modifyColor()">Update</button> <script> function modifyColor(){ var chosenColor = document.getElementB ...

javascripthtmlcssbackground-color

Strange spacing in Angular Material checkbox

I have a container with an angular material checkbox inside. The background of the container is black, so I changed the background color of the checkbox to white for visibility. However, there seems to be some unwanted spacing on the right side of the chec ...

htmlcssangularjscheckboxangular-material

How can JQuery detect input in the fields?

I have the following HTML code and I am looking to trigger a function based on the input in any of the input fields, regardless of the field number. <input type="text" pattern="[0-9]*" name="code" maxlength="1" au ...

javascripthtmljquerycss

JavaScript Equivalent of jQuery's removeClass and addClass Functions

I am faced with the challenge of rewriting the following code without using jQuery: document.querySelector('.loading-overlay').classList.remove('hidden'); Can anyone provide guidance on how this can be achieved? ...

javascriptjqueryhtmlcss

What is the process for embedding images and text within a nested division element?

I have a website layout with 4 main sections: header, left side, right side, and footer. I would like to further divide the header into two sections - left header and right header. The right header should contain an image along with other options like home ...

htmlcss

What are the disadvantages of not incorporating the main CSS file directly into the web page?

Optimizing the loading time of my webpages is a priority for me, especially when it comes to first-time loading and from cache. Despite that, I still prefer to have the browser re-validate all resources to avoid any strange displays or update issues caused ...

htmlcsshttpcachingwebserver

Obtaining the calculated background style on Firefox

Back when my userscript was only functional on Chrome, I had a setup where I could copy the entire background (which could be anything from an image to a color) from one element to another. This is how it looked: $(target).css('background', $(so ...

javascriptjquerycssgoogle-chromefirefox

Variables disappearing after hiding the flash application

In the div, I have a flash file embedded. This div is initially visible with display:block;. There are two other sister divs alongside this one. All three divs are controlled by jQuery tabs, which means when a different tab is clicked, the current visible ...

htmlcssflashdata-loss

Is it possible for Angular's ngStyle to accept multiple functions? If not, what is the alternative solution?

Can multiple conditions be added to different attributes with ngStyle? Is it possible to change text color and background color based on specific JSON values using ngStyle? About the Project: I am currently working on creating a tab bar that resembles a ...

htmlangulartypescriptng-style

PHP is failing to redirect the user to the correct index.php file

I encountered an issue in Jquery Mobile that has left me puzzled. Upon entering the site, users are prompted to either register or login. When selecting register, they are redirected to a page where they input their information. Once completed, the data is ...

phphtmlajaxjquery-mobile

When the page is scrolled, the div is fixed in place and a class is dynamically added. Some issues may

Greetings everyone, I have a webpage with two floating divs - one is about 360px wide and the other has an auto width. As the page scrolls, the left div is assigned a class that fixes it to the screen, allowing the other div to scroll. This functionality w ...

javascriptjqueryhtmlcss

Tips for arranging images of varying heights on separate lines so they appear cohesive as a group

I've been working with masonry.js but I'm still not achieving the effect I want. Javascript:` var container = document.querySelector('#container'); var msnry = new Masonry( container, {columnWidth: 200, itemSelector: '.item' ...

htmlcssimage