Bootstrap 4 Vertically align footer while respecting columns and rows - css

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 &copy 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

Related

Display flex and any other HTML tag

Suppose this very simple case:
.header-top .custom-html {
display: flex;
align-items: center;
}
<div class="header-top header-has-center-sm">
<div class="header-row container-fluid">
<div class="header-col header-left hidden-for-sm">
<div class="custom-html"><i class="porto-icon-shipping me-2" style="font-size: 2em; vertical-align: middle;"></i>Shipping to all states, <span style="font-weight: bold;">FREE</span> shipping to orders above $50</div>
</div>
<div class="header-col visible-for-sm header-center">
<div class="custom-html"> </div>
</div>
<div class="header-col header-right hidden-for-sm">
<div class="custom-html"><i class="Simple-Line-Icons-badge me-2" style="font-size: 2em; vertical-align: middle;"></i>All our products are <b>GENUINE</b></div>
</div>
</div>
</div>
As you can see, the content of the <b> tag gets next to the surrounding words, as if there is no whitespace around it.
Can someone explain why this is happening and how to remedy it? It's the first time I notice this happening...
Basically, I set the content's display to flex, as I need to vertically align to the middle the text. But this side-effect was totally unexpected...
The issue is your text grouping. I know it sounds strange but text wrapped in div is not really grouped. You would need to wrap it in a <span> or <p> tag. I have used a <span> just to let the browser know that this text belongs together. You can use a <p> tag which obviously comes with more preset styles like margins on the top and bottom.
.header-top .custom-html {
display: flex;
align-items: center;
}
<div class="header-top header-has-center-sm">
<div class="header-row container-fluid">
<div class="header-col header-left hidden-for-sm">
<div class="custom-html"><span><i class="porto-icon-shipping me-2" style="font-size: 2em; vertical-align: middle;"></i>Shipping to all states, <span style="font-weight: bold;">FREE</span> shipping to orders above $50</span>
</div>
</div>
<div class="header-col visible-for-sm header-center">
<div class="custom-html"> </div>
</div>
<div class="header-col header-right hidden-for-sm">
<div class="custom-html"><span><i class="Simple-Line-Icons-badge me-2" style="font-size: 2em; vertical-align: middle;"></i>All our products are <b>GENUINE</b></span></div>
</div>
</div>
</div>

How to make bootstrap loader lay on div?

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>

How to change the size of mat-card in angular material

I want both Components the same height (the size of left form) tried margin , padding nothing works
below is the code for its parent element HTML
<mat-tab label="Update Profile">
<div class="container">
<mat-card class="mat-card-container">
<div class="vertical-center row" >
<div class="col-lg-1">
</div>
<div class="col-lg-6">
<app-register [user]="user"></app-register>
</div>
<div class="col-lg-4 password-change-form">
<app-password-change [id]="user.id"></app-password-change>
</div>
<div class="col-lg-1">
</div>
</div>
</mat-card>
</div>
</mat-tab>
CSS
.vertical-center {
margin-top: 2rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
}
.password-change-form{
padding: inherit;
}
.spacer{}
Better you can use flex layout. Refer: [https://github.com/angular/flex-layout/wiki/fxLayoutAlign-API][1]
Set fxFlexAlign="stretch" to have all mat-card in same height.
The problem is not with the mat card, but with the div with password-change-form if you were asking to make them the same height:
.password-change-form{
height:100%
}
but if you want them to have the same width, you should probably add col-lg-5 to both of them instead of 6 and 4
<div class="col-lg-5">
<app-register [user]="user"></app-register>
</div>
<div class="col-lg-5 password-change-form">
<app-password-change [id]="user.id"></app-password-change>
</div>

Place Font-Awesome-5 Icon as Bootstrap-4 Card background

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.

Getting react-widgets' elements to align in row-wise flexbox

I'm having trouble integrating react-widgets (Dropdownlist and Multiselect) with my styling in the same way as the input-fields I've used before.
It should look like this:
With the white rectangles beeing react-widgets Dropdownlists respectively Multiselect.
Here's a codepen-example, with the second blue block containing react-widget's markup: http://codepen.io/peletiah/pen/ORLaGr
This is the relevant (simplified) markup:
.route {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.sequence {
display: flex;
height: 90px;
line-height: 90px;
}
.action {
align-self: center;
line-height: normal
}
<div class="route">
<div class="sequence">
<div class="action">
<span>
<input value="set">
</span>
<span>
<input value="data goes here">
</span>
</div>
</div>
<div class="sequence">
<div class="action">
<div class="rw-dropdownlist rw-widget">
<div class="rw-input">set</div>
</div>
<div class="rw-multiselect rw-widget">
<div class="rw-multiselect-wrapper">
<input>
</div>
</div>
</div>
</div>
</div>
The markup inside the action-div in the second "sequence" is produced by react-widget, so I have a no influence and can't easily replace them with spans.
The widgets are supposed to be aligned next to each other like the inputs in the first sequence, but they are stacked on top of each other.
Is it possible to fix this with css?
In the codepen-example above I've included the react-widgets less-code in the upper part of the css-section of the codepend, at then end of it is my custom css.
There where two issues with the original code-sample.
Vertical alignment of the "action"-container inside the "sequence"-container was achieved by setting "line-height".
The line-height is also responsible for the 90px-high "rw-multiselect-wrapper"-div, which it inherits from the "sequence"-class.
Flexbox allows self-alignment of children with the "align-self"-property.
Adding an "align-self" to the class and wrapping each react-widget-div's in their own "action"-div fixes the alignment issue and the height-issue.
.route {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.sequence {
display: flex;
}
.action {
align-self: center;
}
<div class="route">
<div class="sequence">
<div class="action">
<span>
<input value="set">
</span>
</div>
<div class="action">
<span>
<input value="data goes here">
</span>
</div>
</div>
<div class="sequence">
<span class="sequence-order">2</span>
<div class="action">
<div class="rw-dropdownlist rw-widget">
<div class="rw-input">bridge</div>
</div>
</div>
<div class="action">
<div class="rw-multiselect rw-widget">
<div class="rw-multiselect-wrapper">
test
<input>
</div>
</div>
</div>
</div>
</div>
Codepen-sample: http://codepen.io/peletiah/pen/ozjNpW

Resources