I am trying to create the following component using Bootstrap
What I tried:
<style>
.card-container {
height:150px;
overflow-y: scroll;
}
</style>
<div class="jumbletron">
<div class="card card-inverse">
<div class="card-block">
<h3 class="card-title text">Alerts Card</h3>
<div class="card-container">
<div class="card card-inverse">
<div class="card-block">
<h3 class="card-title text">Alert 1</h3>
</div>
</div>
</div>
<div class="card card-inverse">
<div class="card-block">
<h3 class="card-title text">Alert 2</h3>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/rp51o4se/1/
But unfortunately couldn't figure out a way how to properly do it. How can I accomplish this?
In your example you used jumbletron instead of jumbotron for the class and place one of the cards outside the container.
Updated example here - http://jsfiddle.net/rp51o4se/5/
I also added a padding of 1rem to the card container to make it closer to your attached image.
You have your divs a bit mixed up and not wrapping properly.
.card-container {
height:150px;
overflow-y: scroll;
}
<div class="jumbotron">
<h1>My alert center</h1>
<div class="card-container">
<div class="card card-inverse">
<div class="card-body">
<h3 class="card-title text">Alerts Card</h3>
</div>
</div>
<div class="card card-inverse">
<div class="card-body">
<h3 class="card-title text">Alert 1</h3>
</div>
</div>
<div class="card card-inverse">
<div class="card-body">
<h3 class="card-title text">Alert 2</h3>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<style>
.jumbotron{
height: 200px;
overflow-y: scroll;
}
.mb-10{
margin-bottom: 20px;
}
</style>
<body>
<div class="jumbotron">
<div class="card-container">
<div class="card w-50 mb-10">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card w-50 mb-10">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card w-50 mb-10">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div></div>
</body>
</html>
Try this
Related
The section I am doing is just 6 cards, 3 cards in a row of 2. When the screen goes to small (mobile phone size) I want each card just to be on their own row. Each card showing one by one as the user scrolls.
It functions this way when I resize the screen however, when I go to google tools, it does not show my desired outcome.
.row {
padding: 4rem;
background-color: #F8F8FF;
border: 4px black;
colour: red;
}
.card {
background-color: #ddf;
padding: 30px;
margin: 20px;
transition: 0.40s;
}
.card:hover {
transform: scale(1.05);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container ">
<h1 class="display-4">My Projects/Work</h1>
<div class="row g-3">
<div class="col-12 col-md-6 col-lg-4">
<div class="card" id="proj1">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_1" />
<div class="card-body">
<h5 class="card-title">Blog Project</h5>
<p class="card-text">
A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.
</p>
Click to see
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card" id="proj2">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_2" />
<div class="card-body">
<h5 class="card-title">Social media clone </h5>
<p class="card-text">
A social media clone with all the main features of a social media site such as Facebook.In order to achieve this I used Django and React.
</p>
Click to see
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card" id="proj3">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_3" />
<div class="card-body">
<h5 class="card-title">E-commence site</h5>
<p class="card-text">
This is a website I build for a small tech company in my local area that specialized in databases .
</p>
Click to see
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
</div>
</div>
You can put classes on "row" or "column" https://getbootstrap.com/docs/4.6/utilities/flex/#align-items
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<section class="bg-light pt-5 pb-5 shadow-sm">
<div class="container">
<div class="row pt-5">
<div class="col-12">
<h3 class="text-uppercase border-bottom mb-4">Bootstrap Responsive</h3>
</div>
</div>
<div class="row">
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Blog Project</h5>
<p class="card-text mb-4">A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.</p>
Click to see
</div>
</div>
</div>
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Blog Project</h5>
<p class="card-text mb-4">A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.</p>
Click to see
</div>
</div>
</div>
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Blog Project</h5>
<p class="card-text mb-4">A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.</p>
Click to see
</div>
</div>
</div>
</div>
</div>
</section>
I am creating a website that contains a horizontal bootstrap card and I want to fill the image to the full of the height of the left side of the horizontal card. Here are My codes!
<div
class="card mb-3 card_focus"
style="max-width: 60rem; height: 100%"
>
<div class="row no-gutters">
<div class="col-md-4">
<div
class="card text-white bg-primary mb-3 d-flex"
style="max-width: 100%; height: 20rem"
>
<div class="card-body">
<i class="fas fa-file-code"></i>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>
and my related CSS
#main_cont div div i {
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: clamp(70px, 6vw, 200px);
}
here is how it is looking right now:
A Froala design block will help you to understand the basic layouts. I hope it will be a good addition!
Example
Code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<section class="fdb-block">
<div class="col-fill-left" style="background-image: url(https://i.imgur.com/3U2Fd7P.jpg);">
</div>
<div class="container">
<div class="row justify-content-end">
<div class="col-12 col-md-5 text-center">
<h1>Froala Blocks</h1>
<p class="lead">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove</p>
<p class="mt-4">Learn More <i class="fas fa-angle-right"></i></p>
</div>
</div>
</div>
</section>
Add margin-bottom: 0% !important; to class="card text-white bg-primary mb-3 d-flex" like this:
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<title>Bright!</title>
</head>
<link rel="stylesheet" href="style.css">
<body bgcolor='#303030'link=" #ffbd59" vlink=" #ffbd59" alink=" #ffbd59">
<div
class="card mb-3 card_focus"
style="max-width: 60rem; height: 100%"
>
<div class="row no-gutters">
<div class="col-md-4">
<div
class="card text-white bg-primary mb-3 d-flex"
style="max-width: 100%; height: 20rem;margin-bottom: 0% !important "
>
<div class="card-body">
<i class="fas fa-file-code"></i>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
I am working with boostrap cards, and the following is what I have them currently looking like:
Now what I'd like to do is add vertical space between the cards so that Card 1 and Card 3 aren't stuck together as well as Card 2 and Card 4.
The following is my code and setup for the cards I currently have:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 1</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 2</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 3</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 4</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
Add Class mb-3 for <div class="col-sm-6 mb-3">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 1</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 2</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 3</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 4</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
if you want more space, bootstrap class available like mb-4 mb-5
more info here
Add margin-bottom: 20px inside a card class in css file. check the below simple css.
In style.css file
.card {
margin-bottom: 20px !important;
}
I would add something like this (SCSS):
div[class^="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
> h1,
> h2,
> h3,
> h4,
> h5,
> h6 {
margin-top: 0;
}
}
* + * {
:last-child {
margin-bottom: 0;
}
}
... to handle vertical spaces in general.
How to create this card grid inside container(Bootstrap 4)?
I doesn't understand how i can put text in container if text in div(card).
<section class="second__offers">
<div class="container">
<div class="card-group">
<div class="card text-black">
<img class="card-img-top" src="img/service-1.jpg" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
<div class="card text-black">
<img class="card-img-top" src="img/service-2.jpg" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
<div class="card text-black">
<img class="card-img-top" src="img/service-3.jpg" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
</div>
<div class="card-group">
...
</div>
</div>
</section>
example:
Use background-image: instead of img tag (add class to each card and in css and the fit background-image:)
To your comment make container take 100% of width use container-fluid instead of container and set in css:
.container-fluid{
padding:0!important;
margin:0!important;
}
https://jsfiddle.net/nhybo32s/10/
.face{
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.body{
background-image: url(https://material.angular.io/assets/img/examples/shiba2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.card {border:none!important}
.container-fluid{
padding:0!important;
margin:0!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section class="second__offers">
<div class="container-fluid">
<div class="card-group">
<div class="card text-black face">
<div class="">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
<div class="card text-black body">
<div>
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
<div class="card text-black">
<div>
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
</div>
<div class="card-group">
...
</div>
</div>
</section>
I like to make a card-desk with Bootstrap 4 that contains internal list-groups or card-block's (whatever sections) and this sections should have the same horizontal height.
I tried with d-flex flex-column and list-groups. nothing worked as expected. set a fixed height to each section is not an option.
Example:
https://jsfiddle.net/7kvktrh5/
Code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container py-4">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h4 class="card-title">Product 1</h4>
<p class="card-text"></p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Some description</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Price</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Some Text</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Some description: This card has supporting text belosupporting textporting text belosuppal content.</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Price</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Product 3</h4>
<p class="card-text">This is a wider card little bit longer.</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Some description: This card textporting text belosuppal content.</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Price</p>
</div>
</div>
</div>
I hope here is your solution
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container py-4">
<div class="card-deck">
<div class="card border-bottom-0 rounded-top" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 1</h4>
<p class="card-text"></p>
</div>
</div>
<div class="card border-bottom-0 " style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Some Text</p>
</div>
</div>
<div class="card border-bottom-0" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 3</h4>
<p class="card-text">This is a wider card little bit longer.</p>
</div>
</div>
</div>
<div class="card-deck">
<div class="card rounded-0">
<div class="card-body">
<h4 class="card-title">Product 1</h4>
<p class="card-text">Some description: This card has supporting text belosupporting textporting text belosuppal content.</p>
</div>
</div>
<div class="card rounded-0">
<div class="card-body">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Some Text</p>
</div>
</div>
<div class="card rounded-0">
<div class="card-body">
<h4 class="card-title">Product 3</h4>
<p class="card-text">This is a wider card little bit longer. </p>
</div>
</div>
</div>
<div class="card-deck">
<div class="card border-top-0 rounded-bottom" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 1</h4>
<p class="card-text"></p>
</div>
</div>
<div class="card border-top-0 rounded-bottom" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Some Text</p>
</div>
</div>
<div class="card border-top-0 rounded-bottom" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 3</h4>
<p class="card-text">This is a wider card little bit longer. </p>
</div>
</div>
</div>
</div>