how to put div next to each other properly in css? - html

I have 6 cards div showing in rows using Materialize library. But for some reason I cannot make the cards something like this, shown below:
x x x
x x x
So, can anyone help me make it work, am I stuck with the materialize css or can I override it? thanks for the help. All I need to put is 3 divs on top and the other 3 under. So, 2 rows.
here is my code:
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/wired/64/000000/enter-2.png">
<!-- <span class="card-title">Check In</span> -->
</div>
<div class="card-content">
<p>Check In </p>
</div>
<div class="card-action">
Check In
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/greek-pillar.png">
</div>
<div class="card-content">
<p>Expand your opportunities</p>
</div>
<div class="card-action">
View Pillars
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/chat-message.png">
</div>
<div class="card-content">
<p>Chat </p>
</div>
<div class="card-action">
Start Chat
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios-filled/50/000000/search.png">
</div>
<div class="card-content">
<p>Find plenty of resources.</p>
</div>
<div class="card-action">
View Resources
</div>
</div>
</div>
</div>
<!-- gallery -->
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/dotty/50/000000/gallery.png">
</div>
<div class="card-content">
<p>Gallery of events</p>
</div>
<div class="card-action">
View Gallery
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/easel.png">
</div>
<div class="card-content">
<p>VAPA</p>
</div>
<div class="card-action">
View VAPA
</div>
</div>
</div>
</div>
CSS:
.card{
width: 50%;
}
.card .card-image {
width: 20%;
}
.row {
display: flex;
flex-direction: column;
}


I hope this what u r expecting:
use col s12 m4 class.
<div class="row">
<div class="col s12 m4">
</div>
<div class="col s12 m4">
</div>
<div class="col s12 m4">
</div>
</div>
<div class="row">
<div class="col s12 m4">
</div>
<!-- gallery -->
<div class="col s12 m4">
</div>
<div class="col s12 m4">
</div>
</div>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/wired/64/000000/enter-2.png">
<!-- <span class="card-title">Check In</span> -->
</div>
<div class="card-content">
<p>Check In </p>
</div>
<div class="card-action">
Check In
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/greek-pillar.png">
</div>
<div class="card-content">
<p>Expand your opportunities</p>
</div>
<div class="card-action">
View Pillars
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/chat-message.png">
</div>
<div class="card-content">
<p>Chat </p>
</div>
<div class="card-action">
Start Chat
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios-filled/50/000000/search.png">
</div>
<div class="card-content">
<p>Find plenty of resources.</p>
</div>
<div class="card-action">
View Resources
</div>
</div>
</div>
<!-- gallery -->
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/dotty/50/000000/gallery.png">
</div>
<div class="card-content">
<p>Gallery of events</p>
</div>
<div class="card-action">
View Gallery
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/easel.png">
</div>
<div class="card-content">
<p>VAPA</p>
</div>
<div class="card-action">
View VAPA
</div>
</div>
</div>
</div>

Related

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/

Html card scroll bar

I'm working on an angular app and the UI has several .card blocks, but as I keep adding them to the Html, they disappear in the bottom of the page, I was expecting that as I keep adding them a scroll bar would appear in the page, could someone help me with that?
<div class="content-area">
<div class="clr-row">
<div class="clr-col-12">
<div class="card">
<div class="card-block">
<div class="card-title" *ngIf="project">
<app-shr-project-header [project]='project'></app-shr-project-header>
</div>
</div>
</div>
</div>
</div>
<div class="clr-row" style="margin-top: 24px;">
<div class="clr-col-12">
<app-submission-review-grid></app-submission-review-grid>
</div>
</div>
<div class="clr-row">
<div class="clr-col-12">
<div class="card">
<div class="card-block">
<div class="card-title">
<h4>
Information Requests
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
<div class="clr-row">
<div class="clr-col-12">
<div class="card">
<div class="card-block">
<div class="card-title">
<h4>
Attachments
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
</div>
the main-container is in another component
<div class="main-container">
<app-navbar></app-navbar>
<router-outlet></router-outlet>
</div>

Ok even though my app.component already has a class="main-container, putting another one to this Html, also I was missing the class="content-container", with these two now is working
<div class="main-container">
<div class="content-container">
<div class="content-area">
<h1>
SHPO Response
</h1>
<div class="content-area">
<div class="clr-row">
<div class="clr-col-lg-12">
<div class="card mt-0">
<div class="card-block">
<div class="card-title" *ngIf="project">
<app-shr-project-header [project]='project'></app-shr-project-header>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="clr-row" style="margin-top: 24px;">
<div class="clr-col-12">
<app-submission-review-grid></app-submission-review-grid>
</div>
</div>
<br>
<div class="clr-row">
<div class="clr-col-lg-12">
<div class="card mt-0">
<div class="card-block">
<div class="card-title">
<h4>
Information Requests
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
<br>
<div class="clr-row">
<div class="clr-col-lg-12">
<div class="card mt-0">
<div class="card-block">
<div class="card-title">
<h4>
Attachments
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Bootstrap 3: How to precisely center text under a circular image?

I'm using bootstrap 3, the text is not perfectly aligned under a circular image, this is more obvious on different screens and in bootstrap modals and in different languages, I don't want to start adding margin-left because if I do that, I'll be faulty on some screen. Is there a better way?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Arabic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Dari </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Pashto </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Kurdish </span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Farsi </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Tigrinya </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Amharic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> English </span>
</div>
</div>
</div>
</div>

The easy fix to your code is just to add text-center class to all col-xs-* classes. That will center inner images and text inside the col-xs-* wrappers. Note I have added some background color to help visualize the effect.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Arabic </span>
</div>
</div>
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Dari </span>
</div>
</div>
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Pashto </span>
</div>
</div>
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Kurdish </span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Farsi </span>
</div>
</div>
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Tigrinya </span>
</div>
</div>
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Amharic </span>
</div>
</div>
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> English </span>
</div>
</div>
</div>
</div>

You can add a custom class .center to your outermost .container div. This will align the image and text to center using text-align: center;.
.center {
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container center">
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Arabic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Dari </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Pashto </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Kurdish </span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Farsi </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Tigrinya </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Amharic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> English </span>
</div>
</div>
</div>
</div>

You could use only one row and then center the image and the text.
<div class="col-xs-3">
<div class="row text-center">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
<br>
<span class="country text-center"> Arabic </span>
</div>
</div>
Update: you can still use the columns... I've added them to the short version of your example

Flexbox
CSS
display : flex;
justify-content : center;
align-items : center

How to create a column oriented layout using materialize?

I am trying to place two cards among each other beside one larger card using the materialize framework.
The code I am currently using looks like this:
<div class="row">
<div class="col s6">
<div class="card-panel">
<div class="card-content">
<h5 class="blue-grey-text text-lighten-2">p1</h5>
</div>
</div>
</div>
<div class="col s6">
<div class="card-panel">
<div class="card-content">
<h5 class="blue-grey-text text-lighten-2">p3</h5>
</div>
</div>
</div>
<div class="col s6">
<div class="card-panel">
<div class="card-content">
<h5 class="blue-grey-text text-lighten-2">p2</h5>
</div>
</div>
</div>
</div>
And the result looks like this:
But I would like to place p1 and p2 directly beside p3, so that the layout looks like this:
Is this somehow possible using materialize?

You can try something like this.
<div class="row">
<div class="col s6">
<div class="row">
<div class="col-12">
P1
</div>
</div>
<div class="row">
<div class="col-12">
p2
</div>
</div>
</div>
<div class="col s6">
P3
<div>
</div>

Making materialize card selectable

Is there a way to make each entire card selectable? I am only using html, materialize at the moment but the app is in angular too.
<div class="row">
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg">
<span class="card-title">Agenda</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>Whats happening when and where</p>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg">
<span class="card-title">Map</span>
</div>
<div class="card-content">
<p>Map with markers for church, reception etc</p>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg">
<span class="card-title">Confetti</span>
</div>
<div class="card-content">
<p>DIY some eco friendly confetti :)</p>
</div>
</div>
</div>
</div>
Any help would be great. Thanks

Ok, so this was easier than i thought by wrapping an <a href=""> around the cards div like below:
<div class="row">
<div class="col s12 m4">
<a href="https://stackoverflow.com">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg">
<span class="card-title">Agenda</span>
</div>
<div class="card-content">
<p>Whats happening when and where</p>
</div>
</div>
</a>
</div>
<div class="col s12 m4">
<a href="https://stackoverflow.com">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg">
<span class="card-title">Map</span>
</div>
<div class="card-content">
<p>Map with markers for church, reception etc</p>
</div>
</div>
</a>
</div>
<div class="col s12 m4">
<a href="https://stackoverflow.com">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg">
<span class="card-title">Confetti</span>
</div>
<div class="card-content">
<p>DIY some eco friendly confetti :)</p>
</div>
</div>
</a>
</div>
</div>
<div class="row">