How to align these badges side by side? - html

I'm trying to align these badges side by side but am having trouble doing so. inline-block doesn't seem to work and it's always stacked on top of eachother instead of side by side
How do I align it like the picture below?
this is what I'm trying to have it look like:
.tgr_card span {
display: block;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<!doctype html>
<!-- <html lang="en" data-bs-theme="dark"> -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<div class="card tgr_card" style="width: 30rem;">
<div class="card-body">
<h5 class="card-title d-flex justify-content-between align-items-center">
Name
<div class="text-end">
<button type="button" class="btn-close" aria-label="Close"></button>
</div>
</h5>
<h6 class="card-subtitle mb-2 text-muted">#x</h6>
<br>
<ul class="list-group list-group-flush tgr_card_ul">
<li class="list-group-item d-flex justify-content-between align-items-center">
Name
<span class="badge bg-primary rounded-2">test</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Min Max
<div class="row">
<div class="col">
<span class="badge bg-primary rounded-2">1</span>
</div>
<div class="col">
<span class="badge bg-primary rounded-2">None</span>
</div>
</div>
<!-- <div>
<span class="badge bg-primary rounded-2">1</span>
<span class="badge bg-primary rounded-2">None</span>
</div> -->
<!-- <span class="badge bg-primary rounded-2">1 | None</span> -->
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Name
<span class="badge bg-primary rounded-2">test</span>
</li>
</ul>
</div>
<div class="card-footer text-muted text-center">
footer
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
using bootstrap v5.3.0 alpha-1
edit: it's side by side in the snippet but what I mean is that it's side by side and the same size as the full width badge above/below (see attached picture) - so both badges are like 50% width and uniform with the above/below badges


.tgr_card span {
display: block;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.half{
width: 150px;
}
.half span{
width: 49%;
}
<!doctype html>
<!-- <html lang="en" data-bs-theme="dark"> -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<div class="card tgr_card" style="width: 30rem;">
<div class="card-body">
<h5 class="card-title d-flex justify-content-between align-items-center">
Name
<div class="text-end">
<button type="button" class="btn-close" aria-label="Close"></button>
</div>
</h5>
<h6 class="card-subtitle mb-2 text-muted">#x</h6>
<br>
<ul class="list-group list-group-flush tgr_card_ul">
<li class="list-group-item d-flex justify-content-between align-items-center">
Name
<span class="badge bg-primary rounded-2">test</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Min Max
<div class="half d-flex justify-content-between align-items-center ">
<span class="badge bg-primary rounded-2">1</span>
<span class="badge bg-primary rounded-2">None</span>
</div>
<!-- <div>
<span class="badge bg-primary rounded-2">1</span>
<span class="badge bg-primary rounded-2">None</span>
</div> -->
<!-- <span class="badge bg-primary rounded-2">1 | None</span> -->
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Name
<span class="badge bg-primary rounded-2">test</span>
</li>
</ul>
</div>
<div class="card-footer text-muted text-center">
footer
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

Related

Align <h1> and <span> in the same line

I am using Bootstrap 5 to build a webpage. My html code is as following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<title>Homepage</title>
</head>
<body>
<div class="container-fluid p-1 bg-secondary text-white text-center">
<h1>Employee details</h1>
<span class="badge rounded-pill bg-success">2020-21 period</span>
</div>
</body>
</html>
I want to make the <h1> and <span> appear in the same line, rather than one below the other, but am unable to do so. Please help me.

The updated code is as below:
<div class="container-fluid p-1 bg-secondary text-white d-flex align-items-center justify-content-center">
<h1>Employee details</h1>
<span class="badge rounded-pill bg-success ms-3">2020-21 period</span>
</div>
Explanation:
Add class d-flex to make h1 and span in same line.
Add class align-items-center justify-content-center to make them center.
(Optional) Add margin by class ms-3 to the span div to add space between h1 and span

you can use row class and col class like this
<div class="container-fluid p-1 bg-secondary text-white text-center">
<div class="row">
<h1 class="col-4">Employee details</h1>
<span class="col-4 badge rounded-pill bg-success">2020-21 period</span>
</div>
</div>

<div class="container-fluid p-1 bg-secondary text-white text-center">
<div class="row">
<h1 class="col-3">Employee details</h1>
<p class="col-3 offset-1 badge rounded-pill bg-success">2020-21 period</p>
</div>
</div>
In a row there are 12 columns. Change the col-3 number to increase or decrease the number of columns that you want to fill.
The offset-1 is the space between the actual column and the previous. The number of the offset works exactly the same.

what you need is a display:flex and align items: center which using bootstrap can be done by the following:
<div class="container-fluid p-1 bg-secondary text-white d-flex align-items-center">
<h1>Employee details</h1>
<span class="badge rounded-pill bg-success">2020-21 period</span>
</div>
Note that if you need a gap between your span and your h1 you either need to give a margin-right to your h1 or margin-left to your span. If you want your h1 & span to be positioned in the middle of the div you need to add justify-content-center

Cards are all uneven

---------//////Question starts here/////---------------
I am trying to make all of my Bootstrap 5 cards even in standard view and responsive to mobile devices, but adjusting the height in CSS does not seem to work. Right now it is responsive, but the pictures are all stretched out. As far as the card's height they are all different sizes. I tried grabbing the card-text "class" and using truncate but it doesn't seem to help either. I feel like I'm so close. Im almost positive it has to do with the card-text class. Any thoughts? I've attached a picture to this question, and here is my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio Projects</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/bootstrap.min (15).css" />
</head>
<body>
<!-- ===================== NavBar Starts from here====================== -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">CHAZZY!</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a
class="nav-link active"
aria-current="page"
href="../index.html"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="../About/index.html"
>About</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="../Projects/index.html"
>Projects</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="https://chaz-carothers.netlify.app"
>Tree.Link</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
href="../Contact/index.html"
tabindex="-1"
aria-disabled="true"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- ================== NavBar Ends ========================== -->
<!-- ========================== Project Cards ======================== -->
<div class="container">
<div class="row">
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img src="../Projects/img/weather.jpeg" alt="Weather" />
<div class="card-body">
<h5 class="card-title">Weather API</h5>
<p class="card-text">
This is a weather app I created using the ___ API. I added
several other weather resources to provide extra information.
</p>
<a
href="../WEATHER API/index.html"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="../Projects/img/Skeletorrr.png"
class="card- img-top"
alt="skeletor"
/>
<div class="card-body">
<h5 class="card-title.text-truncate">Whack-A-Skeletor</h5>
<p class="card-text">
This is my version of a Whack-A-Mole game that I created using plain vanilla JavaScript.
Skeletor is the mole, and the game has background music to the Price Is Right. Once the user
is finished playing, Vincent Price's notorious laugh chimes in at the end.
</p>
<a
href="https://pedantic-swartz-521f4d.netlify.app"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="./img/badguys.png"
class="card- img-top"
alt="villain"
/>
<div class="card-body">
<h5 class="card-title">Disney Villain Page</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore.
</p>
<a
href="https://dizney.netlify.app"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="../Projects/img/memory.jpeg"
class="card- img-top"
alt="memory"
/>
<div class="card-body">
<h5 class="card-title.text-truncate">Harry Potter Memory Game</h5>
<p class="card-text">
My 7 year old son's favorite movie is Harry Potter, so I programmed a memory game for him using JavaScript.
</p>
<a
href="../Projects/Memory Game/index.html"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"
></script>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
-----------------/////And here is my CSS//// -------------
body {
background-color: gray;
}
.card {
transition: border-color 1s, box-shadow 0.5s;
}
.card:hover {
border-color: rgb(255, 0, 0);
box-shadow: 0px 0px 10px 2px rgb(255, 0, 0);
}
.card-title {
display: flex;
justify-content: center;
}
.film {
font-size: 3rem;
}
#media all and (max-width: 600px) {
.film {
font-size: 2rem;
}
.card {
width: 100%;
}
.card-title {
font-size: 1.5rem;
}
.img-card {
width: 100%;
}
}

How to align form in the same line with the other element?

I have elements in the footer of my card, and lastly I have a form. However, this form is put at the bottom of the other elements whereas I want it to be to the right of the last element (I'm using bootstrap). Here is a working example:
.css123 {
text-decoration: none;
color: black;
}
.css123:hover {
color: #3DB9C3 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card bg-light">
<div class="card-body">
<p>
test
</p>
</div>
<div class="card-footer ">
<div class="float-start ">
<div class="text-start">
<p class="card-text">
<small class="text-muted ">
<a class="card-subtitle css123 text-muted mt-2 me-1">Test1</a>
<a class="card-subtitle css123 text-muted mt-2 me-1">Test2</a>
<a class="card-subtitle css123 text-muted mt-2 me-1">Test3</a>
<form action="#" id="form-js">
<a id="count-js"
class="card-subtitle css123 text-muted me-1">123
Like(s)</a>
<input type="hidden" id="post-id-js">
<button type="submit"
class="card-subtitle css123 text-muted me-1">
Like
</button>
</form>
</small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Cordially

Adjust your markup to remove the form from the paragraph, then remove the div.float-start and div.text-start wrappers (they have no affect). Next add .d-flex to the div.card-footer. In the example below, I also added .ms-auto to the form to make it right-aligned (remove the class to have everything "float" to the left).
.css123 {
text-decoration: none;
color: black;
}
.css123:hover {
color: #3DB9C3 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card bg-light">
<div class="card-body">
<p>
test
</p>
</div>
<div class="card-footer d-flex">
<p class="card-text">
<small class="text-muted ">
<a class="card-subtitle css123 text-muted mt-2 me-1">Test1</a>
<a class="card-subtitle css123 text-muted mt-2 me-1">Test2</a>
<a class="card-subtitle css123 text-muted mt-2 me-1">Test3</a>
</small>
</p>
<form action="#" id="form-js" class="ms-auto">
<small>
<a id="count-js" class="card-subtitle css123 text-muted me-1">123
Like(s)</a>
<input type="hidden" id="post-id-js">
<button type="submit" class="card-subtitle css123 text-muted me-1">
Like
</button>
</small>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

The fonts in a page becomes large whenever the browser is full screen, but i don't want it anymore

I was trying to adjust the fonts in my html page according to the screen size.
I was using
body{
font-size:1vmax;
}
but when i decided to not use it anymore, the font is still changes according to the screen size. It seems fine when i not reference the css code though.. can anyone help me?
here is my html code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Kokeru</title>
<!-- fonts -->
<!-- raleway for kokeru title -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#1,600&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- custom styling -->
<link href="assets/css/custom-style.css" rel="stylesheet">
</head>
<body>
<!-- navbar -->
<nav class="navbar py-0">
<a class="navbar-brand " href="#" id="kokeruBrand">Kokeru</a>
<a class="my-0 ml-auto mr-5 py-0" href="#">
<button class="btn btn-outline-info" type="button">Login</button>
</a>
<!-- navbar -->
</nav>
<!-- penjelasan kokeru -->
<!-- beserta tanggal dan jam -->
<div class="text-center" id="penjelasanKokeru">
<h2>Monitoring Kebersihan dan Kerapihan Ruangan<br>Gedung Bersama Maju</h2>
<h3>Hari Minggu Tanggal 13 Desember 2020 Jam 11:11</h3>
</div>
<!-- ruangan2nya -->
<div class="container-fluid my-5">
<div class="row">
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<!-- row -->
</div>
<!-- ruangan2nya -->
</div>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>
here is my custom-style.css code :
body{
background-color: #bed0ca;
/* font-size: 1vmax; */
}
#kokeruBrand{
font-family: 'Raleway', sans-serif;
}
nav{
background-color: #e3f2fd;
}
#penjelasanKokeru{
color: blue;
}
/* a.card-link,
a.card-link:hover {
color: inherit;
} */
/*
#media screen and (max-width : 320)
{
body
{
font:1.5rem;
}
}
#media screen and (max-width : 1204px)
{
body
{
font:2.5rem;
}
} */

according to the comment, it seems that i still use my cached version of my stylesheet.

According to the comment, and like the Wechuck's answer,
take a look at the styling used via your browsers inspector/developer-tools you are probably still using a cached version of your stylesheet. Ctrl+F5 should force a reload.
according to the comment, it seems that i still use my cached version of my stylesheet.
You should reload the browser with Ctrl + F5
Or Ctrl + Shift + R

Cards stacking over one another with the grid system

I have 4 cards using bootstrap 4. However, when I scale down, the 4 cards overlap one another instead of going down to 2, then to 1 on mobile view.
My code: https://codepen.io/jehc10/pen/LKqRRQ
.navbar-nav {
background: #4287f5;
}
.navbar-brand {
background: #4287f5;
}
.navbar-brand.custom {
color: #FFFFFF;
font-size: 25px
/* border-right:2px solid black; */
}
.navbar {
background: #4287f5;
}
body {
font-family: 'Poppins', sans-serif;
background-image: url("attractive-backdrop-background-988872.jpg");
/* font-weight:700; */
}
.navbar-nav li a {
color: #FFFFFF;
font-size: 20px;
}
.card {
margin-left: 35px;
margin-top: 20px;
background: #f2f2f2;
}
form {
margin-left: 50px;
margin-top: 20px;
background: grey;
border: 2px solid black;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- My stylesheet -->
<link rel="stylesheet" href="website.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
<title>Jesse</title>
</head>
<body>
<!-- NAV bar -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand custom" href="#">Jesse</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About me <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact me</a>
</li>
</ul>
</div>
</nav>
<!-- Portfolio cards -->
<div class=row>
<div class=col-sm-3>
<div class="card" style="width: 18rem;">
<img src="cat.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<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>
Go somewhere
</div>
</div>
</div>
<div class=col-sm-3>
<div class="card" style="width: 18rem;">
<img src="cat.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<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>
Go somewhere
</div>
</div>
</div>
<div class=col-sm-3>
<div class="card" style="width: 18rem;">
<img src="cat.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<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>
Go somewhere
</div>
</div>
</div>
<div class=col-sm-3>
<div class="card" style="width: 18rem;">
<img src="cat.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 4</h5>
<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>
Go somewhere
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class=row>
<div class=col-lg-6>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Remove the inline fixed width to solve this issue.
<div class="card" style="width: 18rem;">

Just add some classes in your card and it will solve your problem.
<div class="col-12 col-sm-3 mb-3">
<div class="card w-100">
<img src="cat.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<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>
Go somewhere
</div>
</div>
</div>
It should solve the problem.
I added col-12 in card wrapper and w-100 in card for full width.
removed the inline style width from the card.

First don't set the width inline with style="width: 18rem;" or in a css file. The width should be determined by the col-x classes of Bootstrap. That is kind of the whole idea.
And if you want to put them below each other you can do this col col-sm-6 col-lg-3. Meaning a card will take up full width on XS, 2 next to each other from SM to MD and 4 next to each other on LG and XL
<div class="row">
<div class="col col-md-6 col-lg-3">
<div class="card">
</div>
</div>
<div class="col col-md-6 col-lg-3">
<div class="card">
</div>
</div>

If you remove the col-sm-3 from the parrent your should work just fine.
What is happening is that you force the parrent div's to fit in one line. But inside them you have a div with a fixed with style="width: 18rem;". So the inner div doesn't fit in the parrent div. That is why they are overlapping (and the flex-wrap property is not working as it should).