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>
I have a Bootstrap 4 project where whenever I minimize the screen a little bit, the image goes underneath the text column. How can I have it where when I minimize the screen it just clips out the image and doesn't send it to the bottom until the screen reaches a certain width? Right now it sends the image to the bottom way too soon.
<div class="container-xs" style="border:2px solid #cecece;">
<div class="row" style="border:2px solid #1ecbe1;">
<div class="core mx-auto">
<div class="BannerPosition">
<!--Banner Description-->
<p class="BannerText">
<div data-highlightword="Anything">
Anything Anything in Anything
</div>
</p>
<!--Download Badges-->
<img class="appleBadge" src="AppleBadge.jpg">
<img class="googleBadge" src="GoogleBadge.jpg">
</div>
</div>
//PROBLEM IS HERE
<div class="col">
<div class="d-flex flex-nowrap">
<img src="VampireCrew.jpg" style="border:2px solid #cecece;">
</div>
</div>
</div>
You can control when the image goes underneath the text by column by using Bootstrap’s columns with breakpoints.
I’ve modified your code to have two 12 column wide columns at the start (small screen) and then the columns switch to a 4 and an 8 from medium size displays and up. You can then use Bootstrap’s sizing utilities to adjust the margins if you want, and I added some CSS to adjust the text size from smaller screens to larger screens using Bootstrap’s normal breakpoints.
To keep the image fitting, I applied Bootstrap’s img-fluid class.
.orange {
color: #FD9B42;
}
.banner {
font-size: 1.25rem;
}
.apple-badge, .google-badge {
margin-bottom: 1rem;
}
#media (min-width:768px){
.banner {
font-size: 1.5rem;
}
}
#media (min-width:992px) {
.banner {
font-size: 2rem;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-xs" style="border:2px solid #cecece;">
<div class="row" style="border:2px solid #1ecbe1;">
<div class="col-12 col-md-4 mb-5 mb-md-0">
<div class="BannerPosition text-center">
<!--Banner Description-->
<p class="banner orange">Anything</p>
<p class="banner">Anything</p>
<p class="banner">Anything in Anything</p>
<!--Download Badges-->
<img class="apple-badge" alt="Apple badge" src="http://via.placeholder.com/150x50.png?text=Apple">
<img class="google-badge" alt="Google badge" src="http://via.placeholder.com/150x50.png?text=Google">
</div>
</div>
<div class="col-12 col-md-8">
<img class="img-fluid" src="http://via.placeholder.com/1280x720.png?text=vampire" alt="Vampires" style="border:2px solid #cecece;">
</div>
</div>
</div>
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>
How can I vertically center this <div class="columns is-vcentered"> to that red colored section which is enclosing it?
And should I remove or add some classes here to improve this code? Please suggest me. Thanks!
I am new to CSS framework, never tried Bootstrap and instead opted for Bulma.
<section id="eyes" class="section">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
<div class="column">
<img class="image" src="img/roll.jpg" alt="">
</div>
</div>
</div>
</section>
In CSS apart from coloring elements, I've only done this:
section {
height: 70vh;
}
I think it's a bit funny that .columns does not have display:flex; by default (should it have perhaps?). Anyway, if you use something that adds flex, for example:
class="columns is-flex is-vcentered"
then you get display:flex from is-desktop and now suddenly is-vcentered works as intended.
Also I think the semantics is off since is-vcentered suggests that it is columns that gets vertically centered. But what it actually does (from source):
.columns.is-vcentered {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
is to make children of columns to be vertically centered inside columns. So you likely also need to set a height of your columns element for this to work.
I think is-vcentered should be named something like has-vcentered-content, but perhaps I'm missing something obvious.
tl;dr; Add height and flex to the columns-element for is-vcentered to do something.
Sorry, I guess this is more of a extrapolation of the problem and not a solution.
I believe the real solution is probably to use the existing hero-class here. (Which by the way centers manually using paddings, just like in Peter Leger's answer!).
Update: I came here from googling a way to vertically align items inside .content not .column class. Others might stumble on this place with the same reason.
If you're trying to vertically align elements inside .content class, here's what I did:
.content.is-vcentered {
display: flex;
flex-wrap: wrap;
align-content: center; /* used this for multiple child */
align-items: center; /* if an only child */
}
Note: This is quite useful for div's that have fixed height.
Here's an example html structure that it worked on
<div class="content is-vcentered has-text-centered">
<h1>Content</h1>
<p>that might be from</p>
<p>wysiwyg containing</p>
<p>multiple lines</p>
</div>
<div class="content is-vcentered">
<p>Some text line</p>
</div>
Here's a sample jsfiddle
The columns are not vertically centered because you have used a height for the section. Use padding to increase the height.
Remove the class .section (in Bulma)
.section {
background-color: white;
padding: 3rem 1.5rem;
}
and use your own padding.
Example
.red-bg {
background: red;
}
.orange-bg {
background: orange;
}
section {
padding: 100px 15px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css" rel="stylesheet" />
<section class="red-bg">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
<div class="column">
<img class="image" src="http://placehold.it/400x300" alt="">
</div>
</div>
</div>
</section>
<section class="orange-bg">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<img class="image" src="http://placehold.it/400x300" alt="">
</div>
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
</div>
</div>
</section>
<section class="red-bg">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
<div class="column">
<img class="image" src="http://placehold.it/400x300" alt="">
</div>
</div>
</div>
</section>
POSTSCRIPT
You can use .columns is-vcentered two times. In that case you can set an height for the section.
section {
height: 70vh;
padding: 15px;
}
.red-bg {
background: red;
}
.orange-bg {
background: orange;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css" rel="stylesheet" />
<section class="columns is-vcentered is-centered red-bg">
<div class="container">
<div class="columns is-vcentered is-centered">
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
<div class="column">
<img class="image" src="http://placehold.it/400x300" alt="">
</div>
</div>
</div>
</section>
<section class="columns is-vcentered orange-bg">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<img class="image" src="http://placehold.it/400x300" alt="">
</div>
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
</div>
</div>
</section>
<section class="columns is-vcentered red-bg">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
<div class="column">
<img class="image" src="http://placehold.it/400x300" alt="">
</div>
</div>
</div>
</section>
Just add .is-flex class on the div.columns and both .is-centered and .is-vcentered will be available (Bulma v.0.7.1):
https://bulma.io/documentation/modifiers/responsive-helpers/
Here's my fully working example with a component centered in the screen:
<template>
<div class="columns is-flex is-vcentered is-centered">
<div class="column is-two-thirds-mobile is-half-tablet">
<Login />
</div>
</div>
</template>
You can also nest columns to the same effect as demonstrated here: Nesting columns.
A little late to the party but I think the best solution in this case is to use margin: auto;.
Hello I'm new to html & css and I have a question. I'm using the following code to set some images with text above and under it as you can see here:
http://jsfiddle.net/thespacebean/xGqDE/
But now i'm trying to re-use that code in another box but the text isn't where it needs to be. here a use another type of box:
css:
#content{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
}
html:
<div id="content">
<h2>Kleding</h2>
<div id="navbanner">
<div id="nav2">
<ul>
<li>Baby</li>
<li>Peuter</li>
<li>Kleuter</li>
</ul>
</div>
</div>
<div id="img">
<img src="../images/winkelwagen.jpg">
</div>
<h3>Baby</h3>
<div class="section">
Pika deken
<img src="../images/baby1.jpg" />
€20
</div>
<div class="section">
School outfit
<img src="../images/boy1.jpg" />
€140
</div>
<div class="section">
Bussines girl
<img src="../images/girl2.jpg" />
€250
</div>
<div class="section">
Summer
<img src="../images/girl1.jpg" />
€99.99
</div>
</div>
And thats why everything is floating left. Can someone get my images and the text under and above centerd without moving the navbar and Baby title? Thanks in advance !
the fiddle example has
text-align: center;
in the CSS put you don't appear to have this in your CSS so the text will be on the left;