VMware Clarity - Same Size for all image cards - html

I'm using clarity design and i have cards that contain different size of images. How can i make these cards maintain the same size?
HTML Code:
<div class="clr-row">
<div class="clr-col-md-4">
<div class="card">
<div class="card-img previewImg">
<img [src]="../pic1.png">
</div>
<div class="card-footer">
<button class="btn btn-outline">Cancel</button>
</div>
</div>
</div>
<div class="clr-col-md-4">
<div class="card">
<div class="card-img previewImg">
<img [src]="../pic2.png">
</div>
<div class="card-footer">
<button class="btn btn-outline">Cancel</button>
</div>
</div>
</div>
<div class="clr-col-md-4">
<div class="card">
<div class="card-img previewImg">
<img [src]="../pic3.png">
</div>
<div class="card-footer">
<button class="btn btn-outline">Cancel</button>
</div>
</div>
</div>
</div>

Related

Extra Space in Bootstrap

I am writing in HTML, using Bootstrap 5. I am trying to make a simple row of cards, however there is a lot of empty padding/space. How do I remove this?
Extra Space between cards
Here is my code:
Code\
<div class="row">
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
</div>
I tried using g-0 in the row, however it did not change at all.

How do I centralize a card in a bootstrap column?

This is html:
<div class="service">
<img src="img/indoor.svg">
<p class="services">indoor</p>
<button class="button">подробнее</button>
</div>
</div>
<div class="col-xxl-4">
<div class="service">
<img src="img/indoor.svg">
<p class="services">BTL</p>
<button class="button">подробнее</button>
</div>
</div>
<div class="col-xxl-4">
<div class="service">
<img src="img/indoor.svg">
<p class="services">на ТВ</p>
<button class="button">подробнее</button>
</div>
</div>
</div>
All my cards are shifted to the left. How can I center them? Offer any options. Thanks for the help.

You might wanna take a look at the Bootstrap Grid system and how it works. If you're indeed using Bootstrap 4 the col-xxl-* won't work, this only exists in Bootstrap 5. Bootstrap 4 only goes up to col-xl.

If you want to center the cards then include this class justify-content-center in the row div. Example is in the following:
<div class="container">
<div class="row justify-content-center">
<div class="col-xxl-4">
<div class="service">
<img src="" class="">
<p class="services">на ТВ</p>
<button class="button">подробнее</button>
</div>
</div>
<div class="col-xxl-4">
<div class="service">
<img src="" class="">
<p class="services">на ТВ</p>
<button class="button">подробнее</button>
</div>
</div>
</div>
</div>

Regarding login and register page asp.net

I wanted to change the default theme of Asp.net.I changed it but now the problem is whenever i click on the login button or register button on the navbar it shows on the home page instead of showing it on a different page.I tired figuring out where the problem was coming from here's what i gathered so far
<!--This Is Causing That Problem-->
<Section id="TextHeader">
<div class="container px-0">
<div class="row">
<div class="col-lg-12" id="special">
<h1 class="text-center text-white">Content</h1>
<h5>Content</h5>
<a type="button" class="btn btn-danger rounded-pill" href="About us.html">Get Started</a>
</div>
</div>
</div>
</Section>
<Section id="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" id="hulky">
<h3 class="text-center">Why Us</h3>
<hr>
<p class="text-center">
content
</p>
Get Started
</div>
</div>
</div>
</Section>
<section id="Middle">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="text-center">Content</h3>
<hr>
</div>
</div>
</div>
</section>
<section id="unamed">
<DIV class="container-fluid px-0">
<div class="row">
<div class="col-lg-6">
<img src="Teacher.jpg" alt="" class="img-fluid d-none d-lg-block">
</div>
<div class="col-lg-6">
<h4>Content</h4>
<p id="teacher">Content</p>
</div>
</div>
</DIV>
</section>
<section id="Students">
<DIV class="container-fluid px-0">
<div class="row">
<div class="col-lg-6">
<img src="Student.jpg" alt="" class="img-fluid d-none d-lg-block">
</div>
<div class="col-lg-6">
<h1>Content>
</div>
</div>
</DIV>
</section>
this code has something that is causing the problem and this is default bootstrap code so its very tough to know what is causing the problem

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>

Image is not showing at all

Img tag is not working for some reason.Can anyone suggest me anything?I'm using bootstrap
<div id="header" class="header">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<h1>Responsive Web design</h1>
<p> Hello</p>
<button type="button" class="btn btn-lg btn-primary">Buy Mow</button>
<button type="button" class="btn btn-lg btm-success">View Details</button>
</div>
<div class="col-lg-6 col-md-6">
<img src=img/a.jpg" alt="1">
</div>
</div>
</div>
</div>

Are you sure is syntax ok?
<img src=img/a.jpg" alt="1">
Where is the " after src?
<img src="img/a.jpg" alt="1">

Be sure to close your quotation marks
<div class="col-lg-6 col-md-6">
<img src="img/a.jpg" alt="1">
</div>

Replace your code with this:
<div id="header" class="header">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<h1>Responsive Web design</h1>
<p> Hello</p>
<button type="button" class="btn btn-lg btn-primary">Buy Mow</button>
<button type="button" class="btn btn-lg btm-success">View Details</button>
</div>
<div class="col-lg-6 col-md-6">
<img src="img/a.jpg" alt="1">
</div>
</div>
</div>
</div>