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).
Related
In order to replicate my problem, I wrote a simple HTML with 2 bootstrap columns, I would like my second column to have multiple <p> items , each one of them below the other, however the issue arises when the strings contained in the <p> tag are of different lengths, since I want them to be in the center of the column but to also start in the same position relative to the X-axis.
<body>
<h2 class="text-center my-5">
title
</h2>
<div class="container">
<div class="row">
<div class="col-md-6 ">
Some unrelated text
</div>
<div class="col-md-6">
<p>Small text</p>
<p>A much longer text</p>
</div>
</div>
</div>
Essentially I would like the string "A much longer text" to be exactly below "Small text", so that it would look this way:
Small text
A much longer text
Instead of
Small text
A much longer text
I tried styling the column with text-align:center as well as using flexbox and align-items:center but they both produce the same result.
first you need to add a d-flex justify-content-center classes to your column then add a div parent to your p tag so your code will be like that
<div class="container">
<div class="row">
<div class="col-md-6 ">
Some unrelated text
</div>
<div class="col-md-6 d-flex justify-content-center">
<div>
<p>Small text</p>
<p>A much longer text</p>
</div>
</div>
</div>
</div>
Using the bootstrap 4 flex box should solve the issue. On running the code below, you would find that bootstrap responsiveness is placing the col-md-6 in 2 lines. Running code outside stack overflow should give the result you desire.
Edit: Added some javascript code to center the text as per the comments from the OP
$( document ).ready(function() {
let divLeft = $('#div-center-text').position().left;
let min = 0;
$('.center-text').each(function(i, obj) {
let p = $(obj);
let pLeft = p.position().left;
if (min==0 || min>pLeft)
min = pLeft;
});
$('.center-text').each(function(i, obj) {
$(obj).offset({left: divLeft + min});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<body>
<h2 class="text-center my-5">
title
</h2>
<div class="container">
<div class="row">
<div class="col-md-6 border">
Some unrelated text
</div>
<!-- .col-md-6 -->
<div class="col-md-6 border" id="div-center-text">
<div class="d-flex flex-column align-items-center w-100">
<p class="mb-0 center-text">Small text</p>
<p class="mb-0 center-text">A much longer text</p>
</div>
<!-- .flex-column -->
</div>
<!-- .col-md-6 -->
</div>
<!-- .row -->
</div>
<!-- .container -->
</body>
</html>
Using bootstrap reslove your issue, you can align content in center ofthe page horizontal.
try below example.
<div class="pricing4 bg-light" style="margin-top: -20px;padding-bottom: 25px;margin-bottom: -32px;">
<div class="container">
<!-- Row -->
<h2 style="text-align: center;padding: 40px;">This is improper content (div)</h2>
<div class="row justify-content-md-center">
<!-- Row -->
<div class="row justify-content-md-center" style="margin-left: 30px;margin-right: 30px;">
<!-- Column -->
<div class="col-md-3">
<div class="card card-shadow border-0 mb-4">
<img class="card-img-top" src="https://i.ibb.co/GFrTmrm/dummy-size.jpg" alt="wrappixel kit">
<div class="pveventcard">Tuesday 11th May, 6:00PM</div>
<div class="p-3" style="height: 200px;">
<h6 class="font-weight-medium mb-0">The event is going bla</h6>
<h6 class="subtitle font-13">16/5/2021</h6>
<p>short description goes here short </p>
</div>
</div>
</div>
<!-- Column -->
<div class="col-md-3">
<div class="card card-shadow border-0 mb-4">
<img class="card-img-top" src="https://i.ibb.co/GFrTmrm/dummy-size.jpg" alt="wrappixel kit">
<div class="pveventcard">Tuesday 11th May, 6:00PM</div>
<div class="p-3" style="height: 200px;">
<h6 class="font-weight-medium mb-0">The event is going bla</h6>
<h6 class="subtitle font-13">16/5/2021</h6>
<p>short description goes here short </p>
</div>
</div>
</div>
<!-- Column -->
<div class="col-md-3">
<div class="card card-shadow border-0 mb-4">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>
<div class="pveventcard">Tuesday 11th May, 6:00PM</div>
<div class="p-3" style="height: 200px;">
<h6 class="font-weight-medium mb-0">The event is going bla</h6>
<h6 class="subtitle font-13">16/5/2021</h6>
<p>short description goes here short </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
---------//////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%;
}
}
I'm still struggling with Bootstrap and I've just started a web application using Bootstrap 3. I would like to align a box on the right side of the screen but I can't find my solution after a few hours of research and testing... Here is where I would like to place it:
Here is the existing code:
<div class="container-fluid">
<div class="row mt-4 mb-4">
<div class="col-md-12 mt-4 mb-4">
#if($user->object->bio)
<blockquote>{{ $user->object->bio }}</blockquote>
#endif
#if($albums->count())
#include('pages.partials.album-stream-2021', ['albums' => $albums])
#else
#include('partials.no-results', ['message'=>'This user have no albums uploaded'])
#endif
</div>
</div>
</div>
Open this example full screen:) you should be good to go:)
div {
border:1px solid;
}
<!-- Latest compiled and minified CSS -->
<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">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid">
<div id="DivLeft" class="col-md-3">
left Side bar
</div>
<div id="DivMain" class="col-md-6">
<div id="card" class="col-md-4">
<div class="card-body">
<h5 class="card-title">Card title</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>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
<div id="card" class="col-md-4">
<div class="card-body">
<h5 class="card-title">Card title</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>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
<div id="card" class="col-md-4">
<div class="card-body">
<h5 class="card-title">Card title</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>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
</div>
<div id="DivRight" class="col-md-3 ">
right Side bar
</div>
</div>
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
I am trying to create a simple grid using cards. I am using ng-repeat to create cards. The problem is there is no spacing between each card as shown
I am using the below code
<!DOCTYPE html>
<html lang="en" ng-app="movieflix">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="catalogcontroller">
<div class="row" >
<div dir-paginate="user in users|itemsPerPage:16">
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card card-block ">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="http://ia.media-imdb.com/images/M/MV5BMTU4MDU3NDQ5Ml5BMl5BanBnXkFtZTgwOTU5MDUxNTE#._V1_SX300.jpg", class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Social shares button-->
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--Text-->
<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>
<a href="#" class="d-flex flex-row-reverse">
<h5 class="waves-effect waves-light p-2">Read more <i class="fa fa-chevron-right"></i>
</h5>
</a>
</div>
<!--/.Card content-->
</div>
</div>
</div>
</div>
<dir-pagination-controls
max-size="5"
direction-links="false"
boundary-links="false" >
</dir-pagination-controls>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="js/dirPagination.js"></script>
<script src="js/movieflix.module.js"></script>
<script src="js/catalog.controller.js"></script>
</body>
</html>
Can someone tell me what is wrong with my code.
Really appreciate any suggestions.
Thanks in advance
The card class works perfectly well. Your images are too wide. Change your image class from img-fluid to img-responsive and it should work.
At least it does on this fiddle.
Add space between the cards:
.card {
margin-right: 10px;
}
.card:last-of-type {
margin-right: 0;
}