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.
Related
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 want to make this card into masonry style in bootstrap, You can see the below column had the same height but I want fluid height, cards must had same margin like the blue line.I was trying on .card-columns and masonry style (column-count: 4), However it weren't working at all.
And this is my code
<div class="col-12 col-lg-8 col-xl-9 col-right">
<div class="row listing-card-container">
{% for loop %}
<div class="col-sm-5 col-lg-5 col-xl-3 mb-4">
<div class="card">
<div class="position-relative shadow-sm">
<a href="........"><img class="card-img-top"
src="...." alt="Card image cap"></a>
</div>
<div class="card-body">
<a href="..link..">
<h6 class="mb-3 listing-heading ellipsis">
..content..
</h6>
</a>
<footer>
<p class="text-muted text-small mb-0 font-weight-light">
..date..</p>
</footer>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
Thanks.
Looks like it is — https://w3bits.com/labs/flexbox-masonry/2/
.masonry {
display: flex;
flex-flow: column wrap;
max-height: 800px;
margin-left: -8px; /* Adjustment for the gutter */
width: 100%;
}
.masonry-brick {
margin: 0 8px 8px 0; /* Some gutter */
}
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'm building a sidebar using the grid system in Bootstrap 4, and the Flexbox utility. For the most part, I have it working, except that I would like to have the sidebar be "static," that is, it should not move when the user scrolls on the page next to it.
I attempted to do this by adding position:fixed to it, but when I did that, the column the sidebar was in was reduced in size to the length of the longest string that was there.
How do I make the sidebar stay fixed in place, while maintaining column width?
Here's my code: (It's a React app, so "class" is replaced with "className")
Parent component:
{ this.state.isLoggedIn ?
<div className="row h-100">
<div className="col-2 no-padding-right">
<Sidebar />
</div>
<div className="col-10 no-padding-left">
<Main />
</div>
</div> :
<Main />
}
The sidebar itself:
<div className="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div className="p-2">
Week 11
</div>
<div className="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div className="p-2">Current Features</div>
<div className="p-2">Feature Request</div>
<div className="p-2">Settings</div>
<div className="p-2">Billing</div>
<div className="p-2">Log Out</div>
</div>
And the relevant piece of CSS:
.sidebar-left {
padding-top: 83px;
position: fixed;
}
Thanks!
Apply the max-width to the sidebar-left is equal to how much your col have.
.sidebar-left {
max-width: 16.666667%;
}
Stack Snippet
body {
margin: 0;
}
.sidebar-left {
font: 13px Verdana;
padding-top: 83px;
position: fixed;
background: red;
max-width: 16.666667%;
left: 0;
top: 0;
overflow: auto;
}
.p-2 {
word-break: break-word;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="row h-100">
<div class="col-2 no-padding-right">
<div class="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div class="p-2">
Week 11
</div>
<div class="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div class="p-2">Current Features</div>
<div class="p-2">Feature Request</div>
<div class="p-2">Settings</div>
<div class="p-2">Billing</div>
<div class="p-2">Log Out</div>
</div>
</div>
<div class="col-10 no-padding-left">
<div class="main"></div>
</div>
</div>
I have following css:
#stopBtn{
width : 100%;
bottom: 0px;
}
.affix-bottom{
position: absolute;
}
this is javascript:
$("#stopBtn").affix({
offset: {
bottom: 0
}
});
The affix effect run smooth, but at the bottom it doesn't place below the content but overlap content.
The markup of it looks like:
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- <div class="text-center"> -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
</div>
<!-- </div> -->
</div>
</div>
<div class"tex-center" id="stopBtn">
<button class="btn btn-danger btn-mega stopButton">PAUSE</button>
</div>
I solved it, but putting some extra space after the accordion. put in about 4 does the trick