Issue
<!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/
Solution
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)
Answered By - Lewis Answer Checked By - Terry (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.