im so clueless in css,I have a loader,when i click the function it just starts below the image ina div which is so ugly,i want it to come over, it any idea?
<div class="card" (click)="SendToBank($event)">
<div class="k-block" *ngIf="loadingSpinner">
<div class="spinner-border text-info" role="status" >
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="card-body">
<img class="bank-logo" src="../assets/Img/2.png" id="seb">
<span> SEB</span>
</div>
</div>
any idea how i can achieve that?
Well you just need to position it fixed and style it a little bit.
Read more here css position
I left out the Angular related code.
.k-block {
position:fixed;
display:flex;
width: 100%;
height: 100%;
left:0;
top:0;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.5)
}
<div class="card">
<div class="k-block">
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="card-body">
<img class="bank-logo" src="../assets/Img/2.png" id="seb">
<span> SEB</span>
</div>
</div>
Related
There are several subjects on StackOverFlow as here, but the answers are not intuitive for a beginner.
How to align several text and images in CSS
How to align several text and images in CSS
Actually, I would like to center 2 images on the same line, in bottom of each image there are a title and a subtitle. I would like to make it without display: flex.
I don't understand why the seconde image is not aligned horizontally correctly?
.row{
padding-top: 15px;
text-align: center;
}
.imgP{
background-color:red;
margin: auto 5px;
}
<body>
<div class="row">
<img class="imgP" src="https://zupimages.net/up/21/18/te8n.png" alt="image">
<div class="title">My title</div>
<div class="subtitle">Subtitle</div>
<img class="imgP" src="https://zupimages.net/up/21/18/te8n.png" alt="image">
<div class="title">My title</div>
<div class="subtitle">Subtitle</div>
</div>
</body>
Flex is the easy and modern way to do it. If you don't want to use flex, use display:inline-block. For that, you need to create 2 column divs and wrap the content inside it.
.row {
padding-top: 15px;
text-align: center;
}
.col {
display: inline-block;
}
.imgP {
background-color: red;
margin: auto 5px;
}
<body>
<div class="row">
<div class="col">
<img class="imgP" src="https://zupimages.net/up/21/18/te8n.png" alt="image">
<div class="title">My title</div>
<div class="subtitle">Subtitle</div>
</div>
<div class="col">
<img class="imgP" src="https://zupimages.net/up/21/18/te8n.png" alt="image">
<div class="title">My title</div>
<div class="subtitle">Subtitle</div>
</div>
</div>
</body>
I am trying to display an array list from left to right with a div scroll. But it become top to bottom. How should I do to solve it? This my demo code as you reference.
HTML
<div>
<h2 class="ylet-primary-500 alignleft">Sessions</h2>
</div>
<div style="clear: both;"></div>
<div *ngFor="let batch of batches">
<div class="box">
<div>
<h3 class="classes">
{{batch.month}}
<span class="chips"> </span>
</h3>
</div>
<div style="clear: both;">
<p class="timings">
<mat-icon matPrefix>access_time</mat-icon><span>{{batch.time}}</span>
<span class="slots"> <mat-icon>list_alt</mat-icon>{{batch.slots}}</span>
</p>
</div>
</div>
</div>
CSS
.box {
border: 1px solid #ccc;
padding: 4px;
width: 70%;
direction: rtl;
display: inline-block;
}
Try to wrap loop div container with div container and add css flex style.
<div class="container">
<div *ngFor="let batch of batches">
<div class="box">
<div>
<h3 class="classes">
{{batch.month}}
<span class="chips"> </span>
</h3>
</div>
<div style="clear: both;">
<p class="timings">
<mat-icon matPrefix>access_time</mat-icon><span>{{batch.time}}</span>
<span class="slots"> <mat-icon>list_alt</mat-icon>{{batch.slots}}</span>
</p>
</div>
</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
}
I'm trying to find a solution how to vertically align the 2 rows in the footer which are placed with a Bootstrap grid.
I've already tried to make a wrapper for the content and apply the regular flexbox solution:
display: flex; align-items: center. But this moves both rows to be on the same row.
Fiddle here https://codepen.io/pen/WNNPdxv
HTML
<footer class="footer">
<div class="footer-wrapper">
<div class="container">
<div class="row row">
<div class="col-sm-8 footer-credit">
<h6>GetMove</h6>
<p>Copyright © 2019 GetMove All Rights Reserved</p>
</div>
<div class="col-sm-2 footer-contact">
<h6>Contact</h6>
hola#getmove.net
</div>
<div class="col-sm-2 footer-social-icons">
<h6>Follow us</h6>
<a class="social-icon" target="_blank" href="https://www.facebook.com/pg/GetMove.Official/"
><i class="fab fa-facebook-square"></i
></a>
<a class="social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"
><i class="fab fa-instagram"></i
></a>
<a class="social-icon" target="_blank" href="https://soundcloud.com/getmove"
><i class="fab fa-soundcloud"></i
></a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8 text-center"></div>
<div class="col-sm-4 footer-newsletter">
<h6>Subscribe</h6>
<div class="input-group input-group-sm mb-3">
<input
type="text"
class="form-control shadow-none"
id="subscribe"
placeholder="# Enter your email adress"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
/>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
<div class="container footer-credit">
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4 footer-credit"></div>
</div>
</div>
</div>
</footer>
CSS
.footer {
width: 100%;
height: 24em; /* Set the fixed height of the footer here */
background-color: #f4f2f0;
margin-top: 4em;
}
.footer-social-icons {
list-style-type: none;
}
.footer h6 {
text-transform: uppercase;
font-size: 16px;
}
.footer-credit {
font-size: 11px;
}
.social-icon {
/* display: block; */
margin: 0;
font-size: 16px;
}
.form-control:focus {
border-color: black;
}
The idea of a wrapper to vertically center content is correct, however you already have a wrapper in place => container.
No need to have multiple containers inside a single section (footer). You use rows for this.
So to clean-up your structure a bit, as suggested in the comments, is key to understand what's going on.
container is your wrapper
row row is redundant
empty columns as placeholder are not required with flexbox (bootstrap 4), not sure if that's what's going on... => m-auto, ml-auto, mr-auto
place custom classes inside columns (these blocks might change places someday, especially when designing for a CMS)
keep the structure clean and decorate with utility classes if needed (padding, margin, ...)
HTML Structure
<footer role="contentinfo">
<div class="container">
<div class="row">
<div class="col-sm-7"></div>
<div class="col-sm-3"></div>
<div class="col-sm-2"></div>
</div>
<div class="row">
<div class="col-sm-5 ml-auto"></div>
</div>
<div class="row">
<div class="col-sm-5 ml-auto"></div>
</div>
</div>
</footer>
Solution
Now your height is set on the footer, your container is simply taking the required height inside the space. This means you should now be able to move it vertically with flexbox.
footer[role="contentinfo"] {
display: flex;
flex-flow: column wrap;
justify-content: center; /* content of the footer is the container */
}
DEMO
I want to use a Font Awesome 5 icon as card background image using Bootstrap-4!
I tried everything what I found from the internet but nothing worked.
I'm using Angular2 (v8) along with Bootstrap 4.
The following code worked for me. I've simplified what I use but you still get a font-awesome icon as background and you can put text on top of it:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-6 d-flex">
<div class="class-box">
<div class="bg-primary">
<i class="fa fa-question big-centered-icon"></i>
</div>
<div class="box-content">
<h3 class="title-bg text-outline"><Strong>TITLE</Strong></h3>
<h4 class="title-bg text-outline">Subtitle</h4>
<h4 class="title-bg text-outline"><Strong> Subtitle</Strong></h4>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 d-flex">
<div class="class-box">
<div class="bg-primary">
<i class="fa fa-question big-centered-icon"></i>
</div>
<div class="box-content">
<h3 class="title-bg text-outline"><Strong>HELLO</Strong></h3>
<h3 class="title-bg text-outline"><Strong> 2nd HELLO</Strong></h3>
<h3 class="title-bg text-outline"><Strong> 3rd HELLO</Strong></h3>
</div>
</div>
</div>
</div>
</div>
CSS:
.big-centered-icon {
font-size: 144px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex; /* add */
justify-content: center; /* add to align horizontal */
align-items: center; /* add to align vertical */
}
.class-box{ text-align:center;position:relative;margin:8px;width: 100%;padding-bottom: 75%}
div.class-box > div { position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;padding-top:15%}
.class-box .title-bg{font-size:24px;color:#000;}
See the working fiddle.
I'm trying to create a page where I have image 1 on top and the text at the bottom and image 2 at the bottom and the text on top. I'm not sure how to go about doing it this way.
In my JSFIDDLE I would like "Text 1" to be at the bottom. "Text 2" on top and "Text 3" at the bottom.
my html
<div class="gallery_wrapper">
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/QuLaaLb.jpg">
</div>
<div class="gallery_title">
<h2>
Text 1
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 2
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/QuLaaLb.jpg">
</div>
<div class="gallery_title">
<h2>
Text 3
</h2>
</div>
</div>
JSFIDDLE
This should help you get started. You can use flex and pseudo-properties to achieve this.
.gallery_wrapper {
display: flex;
}
.gallery {
background: #333333;
}
.gallery:nth-child(even) {
display: flex;
flex-direction: column-reverse;
}
.gallery_title {
color: #fff
}
<div class="gallery_wrapper">
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 1
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 2
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 3
</h2>
</div>
</div>
</div>
You can use flexbox for your requirement.
In flexbox there are two properties with which you can solve your issue. Either using order or using flex-direction. But flex-direction is for parent and order is for child. So you can use any of the properties to solve your problem.
In this example snippet, I use order.
.item {
display: flex;
flex-direction: column;
}
.text {
font-size: 20px;
}
.image {
display: flex;
width: 200px;
height: 200px;
background-image: url('https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.item:nth-child(2n) .text {
order: 2;
}
<section>
<div class="item">
<span class="text">Text 1</span>
<span class="image"></span>
</div>
<div class="item">
<span class="text">Text 2</span>
<span class="image"></span>
</div>
<div class="item">
<span class="text">Text 3</span>
<span class="image"></span>
</div>
</section>
You can add the following CSS to achieve this.
.gallery{
position: relative;
}
.gallery_title{
position: absolute;
bottom: 5px;
left: 0;
}
.gallery:nth-child(even) .gallery_title{
bottom: auto;
top: 5px;
}
Check the link here jsfiddle