How can I center a Spinner in the middle of the page?
<div class="content-area" *ngIf="!document">
<div class="spinner">Loading...</div>
</div>
I try several combination of everything css-class with center in it, but did not work for me.
You can use flexbox. Add a class to the content area that implements use of flexbox on its children and then center the item with justify-content and align-items.
Here is the markup I'm referring to:
<div class="content-container">
<div class="content-area centered-content-area">
<div class="spinner">Loading...</div>
</div>
</div>
Here is the css to center the spinner:
.centered-content-area {
display: flex;
justify-content: center;
align-items: center;
}
Here is a stackblitz to see it working:
https://stackblitz.com/edit/clarity-v3-light-theme-hhfttg
Related
I am trying to get the price under the annual plan.
.paymentsection {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
Change
final image
The .plan and .price needs to be inside a div and then if display flex is applied to the paymentsection, you get your desired result.
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan-container">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
Change
</div>
.paymentsection {
display: flex;
flex-direction: row;
}
.plan-container{
flex-grow:1;
}
You need different flex boxes for implementation your image. Each flex box should have different direction. first you need to wrap your .plan div and .price div with another div. This help you to separate pricing component:
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan-wrapper">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
</div>
Change
next you need to set flex direction to your new div element. this is your desire style:
.paymentsection {
display: flex;
}
.plan-wrapper{
display: flex;
flex-direction: column; /* default is row */
}
this changes should fix your issue.
To have the pricing aligned below the text, you'd have to nest the div further and specify the styles of the nested div to be oriented vertically, i.e, flex-direction: column.
You could do something like this:
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="pricing">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
</div>
Change
Styles for pricing class:
.pricing{
display:flex;
flex-direction: column;
}
I'm trying to left align B and then right align C only if there is space, if there is not enough space, how do I make just position itself after B instead of right aligning? is this only doable with javascript or can I do it from CSS?
<div class='A'>
<div class='B'/>
<div class='C'/>
<div>
I actually have it working using javascript to apply css classes and update based on those, but I was wondering if it was possible without doing that.
You can use flexbox. By using justify-content:space-between; items takes space in between of them
.A{
display:flex;
justify-content:space-between;
}
<div class="A">
<div class="B">B</div>
<div class="C">C</div>
</div>
Try out display: flex
like this:
<div class=‚flex a‘>
<div class=‚b‘></div>
<div class=‚spacer‘></div>
<div class=‚c‘></div>
</div>
And use this CSS
.flex {
display: flex;
flex-wrap: wrap;
}
.spacer {
flex: 1 1 auto
}
For more information how flex works look here
Yes you can use
flex-wrap: wrap;
remove display flex in your style
I'm using Bulma have a column of cards which need to have the same height regardless of the content.
To achieve so I have created the following class
.equal-height
display: flex
flex-direction: column
height: 100%
My HTML looks like
<div class='columns is-multiline'>
<div class='column is-one-fifth'>
<div class='card equal-height'>
<div class='card-content'>
# CONTENT GOES HERE
</div>
<div class='card-footer'>
# FOOTER GOES HERE
</div>
</div>
</div>
<div class='column is-one-fifth'>
<div class='card equal-height'>
<div class='card-content'>
# CONTENT GOES HERE
</div>
<div class='card-footer'>
# FOOTER GOES HERE
</div>
</div>
</div>
</div>
Which produces something like
Now I'm trying to make the card-footer to stick at the bottom of the card like below.
I have tried a few things with flex but they don't really make sense.
Any ideas on how I may do it?
Add "flex: auto;" to '.card-contents' to make the card-footer to stick at the bottom of the card. Here is the working jsfiddle link.
.equal-height {
display: flex;
flex-direction: column;
height: 100%;
}
.equal-height .card-content {
flex: auto;
}
Add this CSS
.card-footer {
margin-top: auto;
}
working demo : https://jsfiddle.net/baLg7940/
i ma having trouble to play with boostrap 4 css.
I would like to have in a row two jumbotron with the same height no matter what is inside and with the inside of the div vertically aligned center.
my code is the following :
<div class="container">
<div class="row">
<div class="col-8">
<div class="jumbotron greenback">
<h7>Welcome to the Project test Detail page</h7>
</div>
</div>
<div class="col-4">
<div class="jumbotron greenback">
<div class="inner-score">
<div class="score-title">
<h6>Team Score</h6>
</div>
<div class="score-value">
<h4>85</h4>
</div>
</div>
</div>
</div>
</div>
</div>
I created a jsfidlle to show you https://jsfiddle.net/kscv67kt/2/
As you can see now the two jumbotron have vertical text align center but are not full row height..
Have you tried adding height: 100% to the jumbotron elements?
.jumbotron.greenback {
height: 100%;
}
This will cause both elements to fill the height of the container (the .row in this case).
Worth noting that setting height: 100% would cause the element's bottom margin to overflow it's container, so for neatness you could adjust the jumbotron's and their container's margin-bottom properties accordingly...
.container {
margin-bottom: 32px /* Moving the margin-bottom value of the
.jumbotron to it's outer container. */
}
.jumbotron.greenback {
height: 100%;
margin-bottom: 0;
}
Alternatively with jQuery...
$(document).ready(function() {
var jumboMaxHeight = 0
$(".jumbotron").each(function(){
if ($(this).height() > jumboMaxHeight) {
jumboMaxHeight = $(this).height() }
})
$(".jumbotron").height(jumboMaxHeight)
})
Edit: To centre the text elements within the .jumbotron, there are a number of ways you could do it, one is using flexbox properties on the parent element (in conjunction with the jQuery solution)...
.jumbotron.greenback {
text-align: center;
display: flex;
align-items: center;
justify-content: space-around;
}
I am trying to split my webpage into two vertical columns which can be clicked on to take you to the right pages. I've gotten this far.
HTML
<!-- Choices -->
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-12 vertical-center webd">
<h1 class="text-muted text-center">Web Design</h1>
</div>
<div class="col-md-6 col-xs-12 vertical-center circ">
<h1 class="text-muted text-center">Circus</h1>
</div>
</div>
</div>
CSS
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
.webd {
background-image: url('webd.jpg');
}
.circ {
background-image: url(circ.JPG);
}
My issue is, no matter where I put the text-center class. My <h1>s stay left aligned on the page. Can anybody help?
It is because you have added display flex to the parent container. This means the children are not full width anymore.
If you add the following style, it will fix your error:
.vertical-center > .text-center
{
flex-grow: 1;
}
Example bootply
If you don't want to grow the children, you can just add the following to your vertical center: justify-content: center;
Example bootply 2