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>
Related
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.
I'd like to know how to replace the position for the image from right side to left side and the text from right side to left side
my code is :-
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
</div>
</div>
</div>
There you go. to change the text from right to left just use the class text-left and if you want it to the right use text-right do the same for the image container
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6 layout_padding_2">
<div class="full">
<!-- added class text-left -->
<div class="heading_main text_align_left text-left">
<h2><span> TT </span> ERP </h2>
</div>
<!-- added class text-left -->
<div class="full text-left">
<p> TEST </p>
</div>
</div>
</div>
<div class="col-md-6">
<!-- added class text-left -->
<div class="full text-left">
<img src="images/img2.png" alt="#" />
</div>
</div>
</div>
</div>
</div>
if you only want to show image in left side and text in right side then the image column should be there after the text column
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
</div>
</div>
</div>
Swapping the elements should be helpful.
<div class="section margin-top_50">
<div class="container">
<div class="row">
<!-- Was in 2nd previously -->
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
<!-- Was in 1st previously -->
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
</div>
</div>
</div>
Why are my bootstrap cards aligned on top of each other and not side by side across the page ?
This is the html I have. The rest of the webside is working fine. Not sure what the issue is with these cards and why they will not align side by side.
<div class="container-fluid padding">
<div id="row" class="row padding">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>This is just going to be information about about
the company and wh
</p>
See Profile
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>This is just going to be information about about
the company and wh
</p>
See Profile
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>This is just going to be information about about
the company and wh
</p>
See Profile
</div>
</div>
</div>
</div>
You forgot to close your div tag. This should work.
<div class="container-fluid padding">
<div id="row" class="row padding">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png" />
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>
This is just going to be information about about the company and
wh
</p>
See Profile
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png" />
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>
This is just going to be information about about the company and
wh
</p>
See Profile
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png" />
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>
This is just going to be information about about the company and
wh
</p>
See Profile
</div>
</div>
</div>
</div>
</div>
I am trying to develop a grid of cards using rows and columns.
Since I started using bootstrap, I always had doubts about how to use the column breakpoints correctly. I intend that in desktop size, it will have three columns, but in mobile size, these three columns will "become" just one.
Does anyone know how I can configure breakpoints in order to get just everything in one column, in mobile size?
DEMO
.html
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row" style="height:50%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
<div class="row" style="height:calc(50% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row" style="height:25%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
<div class="row" style="height:calc(75% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
</div>
</div>
Problem
I set the moblie size and get 3 columns, how can I get everything in just one column and occupying the entire screen?
Instead use col-sm on the columns...
<div class="row">
<div class="col-sm">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col-sm">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
<div class="col-sm">
<div class="row">
<div class="col-sm">
<div class="card">
<div class="card-body"> a </div>
</div>
</div>
<div class="col-sm">
<div class="card">
<div class="card-body"> s </div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="card">
<div class="card-body"> s </div>
</div>
</div>
<div class="col-sm">
<div class="card">
<div class="card-body"> Ta </div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="row" style="height:50%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
<div class="row" style="height:calc(50% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="row" style="height:25%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
<div class="row" style="height:calc(75% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
</div>
</div>
https://codeply.com/p/DPFuoonZgF
Also, you can use the padding utils (ie: pb-3) on some of the columns to create vertical spacing on mobile.
This is 1 column on mobile & 3 columns otherwise, based on a 12 column grid.
<div class="col-12 col-md-4">...</div>
The instruction is - fill all 12 columns by default (mobile first), and fill 4 of the columns otherwise.
I think your issue may come from nesting cols within cols, so for simplicity I've reduced this to just one level deep:
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<div class="card">
<h1>Card 1</h1>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<h1>Card 2</h1>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<h1>Card 3</h1>
</div>
</div>
</div>
</div>
Codepen here.
https://getbootstrap.com/docs/4.0/layout/grid/
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