Enhancing Collapsible Bootstrap Cards by Eliminating Borders

Question

Enhancing Collapsible Bootstrap Cards by Eliminating Borders

On my website, I have a button that reveals a set of cards containing information. These cards are displayed with a small gray border around them, which I'm trying to remove. However, setting border: none; in my CSS doesn't seem to do the trick.

Just for your information, I am using Bootstrap 4.3.1 via CDN.

Here is the code snippet:

<div id="skills" class="showcase-buttons">
      <button type="button" class="btn btn-primary btn-block" 
        data-toggle="collapse" href="#skills-showcase" aria-expanded="false"
        aria-controls="skills-showcase">
        Skills
      </button>

      <!-- collapsible content (skills) -->
      <div id="skills-showcase" class="collapse showcase-content justified-text">
...

You can view an image at this link: https://i.sstatic.net/iy5Q0.png

css html sass bootstrap-4

Answer 1

Answer №1

Perhaps the issue lies in your cache not being properly cleared. If that's not the case, you might want to attempt the following solution:

.panel {
    border: none;
}

Alternatively, you could also try this:

<div class="panel border-0">...</div>

Answer 2

Perhaps the issue lies in your cache not being properly cleared. If that's not the case, you might want to attempt the following solution:

.panel {
    border: none;
}

Alternatively, you could also try this:

<div class="panel border-0">...</div>

Answer 3

Answer №2

The border and gray line surrounding the skills button have been successfully removed upon click event.

.card.card-body{ border:none; }

 .btn-primary.focus, .btn-primary:focus { box-shadow:unset !important;}
 
 .btn.focus, .btn:focus{ box-shadow:unset !important;}

<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">

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
<div id="skills" class="showcase-buttons">
      <button type="button" class="btn btn-primary btn-block" 
        data-toggle="collapse" href="#skills-showcase" aria-expanded="false"
        aria-controls="skills-showcase">
        Skills
      </button>

      <!-- collapsible content (skills) -->
      <div id="skills-showcase" class="collapse showcase-content justified-text">
        <div class="row justify-content-around">
          <div class="col-md-4">
            <div id="computer-skills">
              <div class="card card-body">
                <h3>Computer</h3>
                <p>
                  We'll put some happy little leaves here and there. If we're going to
                  have animals around we all have to be concerned about them and take
                  care of them. As trees get older they lose their chlorophyll. This
                  present moment is perfect simply due to the fact you're experiencing
                  it. Let's make some happy little clouds in our world.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div id="design-skills">
              <div class="card card-body">
                <h3>Design</h3>
                <p>
                  Put it in, leave it alone. Just let go - and fall like a little
                  waterfall. The more we do this - the more it will do good things to
                  our heart. Nature is so fantastic, enjoy it. Let it make you happy.
                  Trees grow in all kinds of ways. They're not all perfectly straight.
                  Not every limb is perfect. There are no limits in this world.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div id="problem-solving-skills">
              <div class="card card-body">
                <h3>Problem Solving</h3>
                <p>
                  If these lines aren't straight, your water's going to run right out of
                  your painting and get your floor wet. And I will hypnotize that just a
                  little bit. You need the dark in order to show the light. We don't
                  really know where this goes - and I'm not sure we really care. I get
                  carried away with this brush cleaning.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 4

The border and gray line surrounding the skills button have been successfully removed upon click event.

.card.card-body{ border:none; }

 .btn-primary.focus, .btn-primary:focus { box-shadow:unset !important;}
 
 .btn.focus, .btn:focus{ box-shadow:unset !important;}

<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">

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
<div id="skills" class="showcase-buttons">
      <button type="button" class="btn btn-primary btn-block" 
        data-toggle="collapse" href="#skills-showcase" aria-expanded="false"
        aria-controls="skills-showcase">
        Skills
      </button>

      <!-- collapsible content (skills) -->
      <div id="skills-showcase" class="collapse showcase-content justified-text">
        <div class="row justify-content-around">
          <div class="col-md-4">
            <div id="computer-skills">
              <div class="card card-body">
                <h3>Computer</h3>
                <p>
                  We'll put some happy little leaves here and there. If we're going to
                  have animals around we all have to be concerned about them and take
                  care of them. As trees get older they lose their chlorophyll. This
                  present moment is perfect simply due to the fact you're experiencing
                  it. Let's make some happy little clouds in our world.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div id="design-skills">
              <div class="card card-body">
                <h3>Design</h3>
                <p>
                  Put it in, leave it alone. Just let go - and fall like a little
                  waterfall. The more we do this - the more it will do good things to
                  our heart. Nature is so fantastic, enjoy it. Let it make you happy.
                  Trees grow in all kinds of ways. They're not all perfectly straight.
                  Not every limb is perfect. There are no limits in this world.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div id="problem-solving-skills">
              <div class="card card-body">
                <h3>Problem Solving</h3>
                <p>
                  If these lines aren't straight, your water's going to run right out of
                  your painting and get your floor wet. And I will hypnotize that just a
                  little bit. You need the dark in order to show the light. We don't
                  really know where this goes - and I'm not sure we really care. I get
                  carried away with this brush cleaning.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Enhancing Collapsible Bootstrap Cards by Eliminating Borders

Answer №1

Answer №2

Similar questions

Trouble centering a list within a parent div using CSS

Is there a way to vertically align text to the top of a column using Bootstrap?

How come outerHTML retrieves  comments?

"Enhance your tables with Datatables, Bootstrap 4, and

Creating a secondary title for a Bootstrap Navigation Bar

defiant underscore refusing to function

What steps should I take to adjust the price when multiple items are chosen?

Adding hash history to a sortable showcase: A step-by-step guide

Reposition and resize an image. Creating a grid layout

Having difficulty pinpointing and deleting an added element using jQuery or JavaScript

Toggle jQuery to hide a div and update its CSS styling

Angular ui-router redirection without altering the ui-view contents

Issue with Jquery Date picker functionality on Master Page not functioning as expected

Error alert: The $ symbol is not defined

What is the best way to store objects in files using Node.js?

Craft a search bar inspired by Google's iconic design using CSS styling

Bootstrap 4 has an enlarged input field when compared to the select input

How can I successfully transfer all user information when the edit button is clicked?

Calculate the pixel distance between various divs by measuring the horizontal distance from the left border to the right

A guide on traversing a HTML table and cycling through its contents with JavaScript