2
<!Doctype html>
<html5>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>IBAE-Information Library</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="/Users/jeevabharathi/Documents/Website/IBAE.css">
        <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
    </head>


    <body>
        <nav>
            <h1 style="font-family:Helvetica;">
                <ul class="nav">
                    <li><a href="#">Menu 1</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown" href="#">Menu 2</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                    <li><font size="+4", color="white">IBAE</font> <br></li>
                    <li><a href="#">Menu 3</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 4</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                </ul>
            </h1>
        </nav>
        <br>
        <br>
        <br>
        <br>

       <div class="container">
           <!--row one column one-->
            <div class="row">
                <div class="col-sm-3"><div class="cardpop">
                        <div class="card img-fluid" style="width:600px">
                            <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image" style="width:100%">
                            <div class="card-img-overlay">
                                <font color="white">
                                    <h4 class="card-title">John Doe</h4>
                                    <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
                                    <a href="#" class="btn btn-primary">See Profile</a>
                                </font>
                            </div>
                        </div></div>
                </div>
                <!--row one column two-->
                <div class="col-sm-3"><div class="cardpop">
                        <div class="card img-fluid" style="width:600px">
                                <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image" style="width:100%">
                                <div class="card-img-overlay">
                                    <font color="white">
                                        <h4 class="card-title">John Doe</h4>
                                        <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
                                        <a href="#" class="btn btn-primary">See Profile</a>
                                    </font>
                                </div>
                            </div></div>

                </div>
                <!--row one column three-->
                <div class="col-sm-3"><div class="cardpop">
                        <div class="card img-fluid" style="width:600px">
                                <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image" style="width:100%">
                                <div class="card-img-overlay">
                                    <font color="white">
                                        <h4 class="card-title">John Doe</h4>
                                        <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
                                        <a href="#" class="btn btn-primary">See Profile</a>
                                    </font>
                                </div>
                            </div></div>

                </div>
                <!--row one column four-->
                <div class="col-sm-3"><div class="cardpop">
                        <div class="card img-fluid" style="width:600px">
                                <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image" style="width:100%">
                                <div class="card-img-overlay">
                                    <font color="white">
                                        <h4 class="card-title">John Doe</h4>
                                        <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
                                        <a href="#" class="btn btn-primary">See Profile</a>
                                    </font>
                                </div>
                            </div></div>

                </div>
            </div><br>
       </div>


       <!--test-->









        <script   src="https://code.jquery.com/jquery-3.3.1.js"   integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="   crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    </body>
</html5>

These are my html and CSS

nav h1 
    {
        vertical-align: middle;   
        background-color: rgb(0, 0, 0);
        border: 10px solid rgba(0, 0, 0, 0);
        text-align: center;
        position: fixed;
        position: top;
        min-width: 100%;
        z-index: 3;

    }
.nav ul 
{
    vertical-align: middle;
    -webkit-font-smoothing:antialiased;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0);
    background: rgb(0, 0, 0);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    z-index: 3;
}
.nav li 
{
    vertical-align: middle;
    float: left;
    margin: 0;
    padding: 100; 
    position: relative;
    min-width: 20%;
    z-index: 3;
}
.nav a 
{
    vertical-align: middle;
    background: rgb(0, 0, 0);
    display: block;
    font: bold 15px/50px helvetica;
    padding: 0 0 0 0px;
    text-align: center;
    text-decoration: none !important;
    color: rgb(255, 255, 255);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
            z-index: 3;
}
.nav .dropdown:after 
{
    content: '';
}
.nav .dropdown:hover:after
{
    content:''
}
.nav li:hover a 
{
    color: white;
    background: rgb(0, 0, 0);
}
.nav li ul 
{
    vertical-align: middle;
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 4;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
}
.nav li:hover ul 
{
    opacity: 1;
    top: 50px;
    visibility: visible;
}
.nav li ul li 
{
    float: none;
    width: 100%;
}
.nav li ul a:hover 
{
    background: rgb(255, 0, 0);
}

body{
    background: linear-gradient(to right, rgb(39, 38, 38), rgb(177, 72, 72),rgb(39, 38, 38))
}
.cardpop {
    transition: all 0.5s;
  }

  .cardpop:hover {
    transform: scale(1.1);
    box-shadow: rgb(37, 37, 37);
    transition: all 0.5s;
  }

  .cardpop:hover:before {
    opacity: 1;
  }

.cardpop:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
      transition: .15s all ease-out;
      opacity: 0;
      border-radius: 5px;
  }

I successfully implemented a little concept I had in my head but the bootstrap card has a white border for every image I use for it. I can't change it using the border.

Why does this happen? How do I solve it? I tried !important on border, it didn't change. Can I simply solve it using CSS? I don't want to use JS for now.

JDfiddle link for code: https://jsfiddle.net/pndmn1ev/

5
  • 1
    Can you convert this in to a snippet?
    – Lewis
    May 12, 2018 at 13:08
  • I am really sorry, I am a newbie in web programming. Can you please tell me what is a snippet? I'll try to do it. May 12, 2018 at 13:09
  • This explains it better than I could.
    – Lewis
    May 12, 2018 at 13:10
  • I understood what snippet is but I can't seem to able to convert. So I uploading the code to jsfiddle. May 12, 2018 at 13:17
  • I uploaded the link for jsfiddle! May 12, 2018 at 13:20

3 Answers 3

7

Bootstrap 4 contains some border utility classes - you can find them here in the boostrap documentation.

The particular one you're interested in is border-0, for example;

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

Boostrap cards have borders on some of the inner elements (header, body, etc...). Make sure you're adding the class to the right element(s)

2
  • @JeevaBharathi you should accept this answer as this use bootstrap default utility class. and no other extra CSS needed.
    – patelarpan
    May 12, 2018 at 13:30
  • Made as the answer, Mate. :D May 12, 2018 at 14:03
1

Try the following styles in your code

.card {
    border: 0;
    background-color: transparent;
}

It will remove the border and background color of card element.

0
1

Try this

  .card.img-fluid {
    border-color: transparent;
    background-color: transparent;
  }
0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.