Can't create a bootstrap nested grid system - html

I'm having troubles trying to create a grid layout like this
Grid layout
what i assumed was to create a row and have 2 columns divided, and create a row+col inside each of the 2 columns and in each col have a card.
this is my code
<div class="container">
<div class="row">
<div class="col-8">
Modules
<div class="module-container">
<div class="row">
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4">
Schedule
<div class="row">
<div class="col-6">
<div class="card">
<img src="/images/star.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<img src="/images/star.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
</div>
and this is what came out
my layout
I dont understand why the cards in my second row aren't the same length too?


first you need to add outer row and add 2 columns and then inside first column add row then give your columns col-3, col-4 how much you want in a row same goes to second column. I hope down script help you
<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">
<div class="container">
<div class="row">
<!-- outer grid first column -->
<div class="col-8">
Modules
<div class="module-container">
<!-- first column inner grid -->
<div class="row">
<div class="col-4">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4 mt-2">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4 mt-2">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4 mt-2">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
</div>
</div>
</div>
<!-- outer grid second column -->
<div class="col-4">
Schedule
<!-- second column inner grid -->
<div class="row">
<div class="col-6">
<div class="card">
<img src="/images/star.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<img src="/images/star.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Related

Trying to create carousel for different resolutions BootstrapV4

I'm using BootstrapV4 for a carousel.
On each slide I have 3 cards appearing, but I would like to change this on the cell phone, I would like that on the cell phone only 1 card appears on each slide, I would also like to change the number of indicators.
That is, if I have a total of 6 cards, in higher resolutions there must be 2 slides each with 3 cards and if I have in smaller resolutions there must be 6 slides with 1 card in each slide, and the number of indicators must be equal to the number Slide.
My code:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<div class="card test-card border">
<div class="card-body">
<img src="..." alt="">
<h1 class="title">title</h1>
<h1 class="subtitle">subtitle</h1>
</div>
</div>
</div>
<div class="col-4">
<div class="card test-card border">
<div class="card-body">
<img src="..." alt="">
<h1 class="title">title</h1>
<h1 class="subtitle">subtitle</h1>
</div>
</div>
</div>
<div class="col-4">
<div class="card test-card border">
<div class="card-body">
<img src="..." alt="">
<h1 class="title">title</h1>
<h1 class="subtitle">subtitle</h1>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-4">
<div class="card test-card border">
<div class="card-body">
<img src="..." alt="">
<h1 class="title">title</h1>
<h1 class="subtitle">subtitle</h1>
</div>
</div>
</div>
<div class="col-4">
<div class="card test-card border">
<div class="card-body">
<img src="..." alt="">
<h1 class="title">title</h1>
<h1 class="subtitle">subtitle</h1>
</div>
</div>
</div>
<div class="col-4">
<div class="card test-card border">
<div class="card-body">
<img src="..." alt="">
<h1 class="title">title</h1>
<h1 class="subtitle">subtitle</h1>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-4">
<div class="card test-card border">
<div class="card-body">
<img src="..." alt="">
<h1 class="title">title</h1>
<h1 class="subtitle">subtitle</h1>
</div>
</div>
</div>
<div class="col-4">
<div class="card test-card border">
<div class="card-body">
<img src="..." alt="">
<h1 class="title">title</h1>
<h1 class="subtitle">subtitle</h1>
</div>
</div>
</div>
<div class="col-4">
<div class="card test-card border">
<div class="card-body">
<img src="..." alt="">
<h1 class="title">title</h1>
<h1 class="subtitle">subtitle</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Bootstrap Card images are not contained perfectly around corners

I'm trying to build a portfolio with bootstrap cards where images are also required to be displayed.
Problem is that images are not contained properly within bootstrap card around corners(with class="card-img-top") like some cards are not rounded or some images are not rounded but cards are rounded(tried class="img-rounded").
Kindly zoom in on the images to see the difference. Below are some snippets (and code is given below the snippets):-
Perfect card with image:-
Yellow-> difference
Bug-1:-
Bug-2:-
Bug-3:-
Bug-4:-
Code:-
<%- include('partials/headHTML') %>
<link rel="stylesheet" href="/css/tourpackageStyles.css">
</head>
<!-- <%- include('partials/header') %> -->
<div class="Container">
<div class="container-fluid">
<div class="row">
<div class="col col-md-4">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">Title-1</div>
</div>
<a target="_blank" rel="noopener noreffer" href="#" role="button"
class="btn btn-sm btn-secondary">Enquire</a>
</div>
</div>
<div class="col col-md-4">
<div class="card h-100">
<img src="/images/wildlife/wildlife_tour.jpg"
alt=""
class="card-img-top">
<div class="card-body">
<div class="card-title">Title- 2</div>
</div>
<a target="_blank" rel="noopener noreffer" href="#"
class="btn btn-sm btn-secondary">Enquire</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row row-cols-1 row-cols-md-3 row-cols-sm-2 gy-3">
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 3
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 4
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 5
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 6
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 7
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 8
</div>
</div>
</div>
</div>
</div>
</div>
</div>

If you wish to display only image while using card then place image inside card-body to achieve what you want and give card class "overflow-hidden". Because if you use "card-img-top" and then it has only border-top-left-radius and border-top-right-radius so image wouldn't be rounded on bottom.so you have to provide border-radius manually to both bottom side.
<div class="card overflow-hidden">
<div class="card-body">
<img class="img-fluid" src="" alt="">
</div>
</div>
For more information refer official docs https://getbootstrap.com/docs/5.2/components/card/

How to align these 2 divs vertically with the given html (need them to start at same vertical level)

<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="news-title">
<h3 class="title">NEWS & ARTICLES</h3>
</div>
</div></div>
<div class="row row-cols-1 row-cols-md-3 g-4" style="justify-content: center;margin-top: 25px;">
<div class="col resize-card">
<div class="card-img-wrap h-100">
<img src="SiteAssets/assets/igomd/images/news-1.png" class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">KIOSK</h4>
</div>
</div>
</div>
<div class="col resize-card">
<div class="card-img-wrap h-100">
<img src="SiteAssets/assets/igomd/images/news-2.png" class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">LOREM</h4>
</div>
</div>
</div>
<div class="col resize-card">
<div class="card-img-wrap h-100">
<img src="SiteAssets/assets/igomd/images/news-3.png" class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">IPSUM</h4>
</div>
</div>
</div>
</div>
</div>
Basicly i need to align NEWS & ARTICLES and the Cards below vertically. So they have to start at the same vertical level. I could not manage to find a css solution for this.
I think that the div with the (class="row row-cols-1 row-cols-md-3 g-4" style="justify-content: center;margin-top: 25px;) properties are preventing the title and Cards to start at the same vertical level.
I made a crop and paste picture to show you what i need to accomplish you guys.
Here is the photo of what i need to do.
What can i do to accomplish this below with that given html?

This is working fine in my case maybe there is some CSS conflicts in your code.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="news-title">
<h3 class="title">NEWS & ARTICLES</h3>
</div>
</div></div>
<div class="row row-cols-1 row-cols-md-3 g-4" style="justify-content: center;margin-top: 25px;">
<div class="col resize-card">
<div class="card-img-wrap h-100">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">KIOSK</h4>
</div>
</div>
</div>
<div class="col resize-card">
<div class="card-img-wrap h-100">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">LOREM</h4>
</div>
</div>
</div>
<div class="col resize-card">
<div class="card-img-wrap h-100">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">IPSUM</h4>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

How to replicate youtube "video card". I cant make the user icon to take 3 rows. Not sure if I should do it with bootstrap or flex or what

This is the layout I am looking for
<section>
<div class="row">
<div class="col-3" style="background-color: rgb(163, 163, 163)">
<!-- VIDEO THUMBNAIL -->
<a mat-list-item routerLink=''>
<img class="" src="../../assets/img/thumbnails/colibri.jpg" alt="colibri" style="max-width:100%;">
</a>
<!-- Uploaders user image -->
<a mat-list-item>
<img src="../../assets/img/avatar.png" alt="Avatar" style="border-radius: 50%; width:40px;">
</a>
<!-- video heading and information -->
<h2>Animals in rainforest</h2>
Content Creator
<p>2,1 milj. views · 2 years ago</p>
</div>
</div>
I cant make the avatar icon to take three rows on the left
the avatar icon, h2, content creator and information are just stacked on top of each other.
(sorry if the post is confusing this is my first time posting in stack overflow).
best regards Angular developer from Finland

<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img class="card-img-top" src="..." alt="...">
<div class="card-body">
<div class="media">
<img src="..." class="mr-3" style="max-width: 80px" alt="...">
<div class="media-body">
<h5 class="mt-0">Animals in rainforest</h5>
Content Creator
<p>2,1 milj. views · 2 years ago</p>
</div>
</div>
</div>
</div>
</div>
... should do it. Here's a demo:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
<div class="row">
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/d/db/Colibri-thalassinus-001-edit.jpg" alt="colibri">
<div class="card-body">
<div class="media">
<img src="https://img.stackshare.io/service/1927/so-icon.png" class="mr-3" style="max-width: 80px" alt="...">
<div class="media-body">
<h5 class="mt-0">Animals in rainforest</h5>
Content Creator
<p>2,1 milj. views · 2 years ago</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/d/db/Colibri-thalassinus-001-edit.jpg" alt="colibri">
<div class="card-body">
<div class="media">
<img src="https://img.stackshare.io/service/1927/so-icon.png" class="mr-3" style="max-width: 80px" alt="...">
<div class="media-body">
<h5 class="mt-0">Animals in rainforest</h5>
Content Creator
<p>2,1 milj. views · 2 years ago</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/d/db/Colibri-thalassinus-001-edit.jpg" alt="colibri">
<div class="card-body">
<div class="media">
<img src="https://img.stackshare.io/service/1927/so-icon.png" class="mr-3" style="max-width: 80px" alt="...">
<div class="media-body">
<h5 class="mt-0">Animals in rainforest</h5>
Content Creator
<p>2,1 milj. views · 2 years ago</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/d/db/Colibri-thalassinus-001-edit.jpg" alt="colibri">
<div class="card-body">
<div class="media">
<img src="https://img.stackshare.io/service/1927/so-icon.png" class="mr-3" style="max-width: 80px" alt="...">
<div class="media-body">
<h5 class="mt-0">Animals in rainforest</h5>
Content Creator
<p>2,1 milj. views · 2 years ago</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Bootstrap docs:
media object
cards
grid layout
utilities

How to make each of columns get equal height in Bootstrap 4?

Take a look this picture:
2nd column is at right, it looks the height isn't equal to the first column I need to figure out how 2nd column should get the same height as the first column.
My HTML:
<div class="row"">
<div class="col-8">
<div class="row">
<div class="col-12 mb-2">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
</div>

Use the flexbox utils to make the right column display:flex, flex-direction: column...
<div class="container-fluid">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-12 mb-2">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
<div class="col-4 d-flex flex-column">
<div class="row flex-fill justify-content-between">
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
<div class="col-12 d-flex align-items-end">
<div class="imgcontainer">
<img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
<div class="top-left">Top Left</div>
</div>
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/hlHhjz3K1Q

You can try something like this:
<div class="container">
<div class="d-md-flex">
<div class="flex flex-row flex-nowrap">
<img src="https://i.imgur.com/exWWySt.png">
<img src="https://i.imgur.com/exWWySt.png">
</div>
<div class="flex-column">
<img src="https://i.imgur.com/exWWySt.png" height="300">
<img src="https://i.imgur.com/exWWySt.png" height="300">
<img src="https://i.imgur.com/exWWySt.png" height="300">
</div>
</div>
</div>
Codepen