I have simple Bootstrap 4 card with footer that has some text and icon. Here is the code:
<div class="card ">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
<div class="card-footer ">
<i style=" font-size: 2.5em;" class="fab fa-facebook "></i>
<span class="float-right" >some text</span>
</div>
</div>
If I place fa icon code it expands the footer. What I want that the icon is simply overlayed on footer area (kind of floating on it) without disturbing the size of footer i.e the size of the footer to remain the same as if the icon code is not placed. There are multiple cards on page with same footer.
How to accomplish this ?
You can remove your icon element from the normal elements flow by set its parent to position: relative and the icon element to position: absolute. This way, your icons position depends on the footer and you can adjust the position e.g. with top.
If you have multiple icons, you can either adjust the position of every single icon or place them in a container <div> which then is set to position: absolute instead of the icons.
.card-footer {
position: relative;
}
.icons {
position: absolute;
top: -.35rem;
font-size: 2.5em;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="card ">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
<div class="card-footer">
<div class="icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
</div>
<span class="float-right">some text</span>
</div>
</div>
Well there technically is multiple ways to achieve this.
Either the icon needs a set position: absolute attribute.
But you could also have a set height on your footer element height: 300px for example. But that might move your other content around (unsure if that is what you want).
Related
I have added custom CSS to flip the image n show text in a bootstrap site, but the image falls out of bootstrap card.
One solution I found was to add image height, but that makes its irresponsive.
I want the image in the card + want it to be responsive.
It's a temporary portfolio site I am trying to develop to learn bootstrap.
problem image
.flip-container,
.front,
.back {
width: 100%;
/* height: 400px; */
}
```
```
<div class="card-body text-center">
<h3 class="card-title mb-3">GCET Prep App</h3>
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="1.png" class="img-fluid" alt="#" />
</div>
<div class="back">
<p class="card-text">
text
</p>
</div>
</div>
</div>
<p class="card-text">
(Deployed on playstore)
<br />
An app for Gcet Preparation
</p>
<a
href=""
target="_blank"
class="btn btn-danger me-5"
>Playstore</a>
</div>
Zip file of full project drive link
add style="height: 100%;" to .card class
I was able to fix the issue by taking the front (image) as relative (position) n back (text) as absolute.
I've created a div that uses flex to display 5 icons inside of a container. Each of these containers has a div with a text element inside. This text div has an opacity of 0 by default and is changed to 1 when it's parent is hovered.
The problem happens when you move your mouse into the text div. For some reason, it defaults to showing the text div of the very last parent element. I've recreated the issue here: JSFiddle
Here is the basic structure of the HTML. I've removed the last 3 content divs for readability.
<div class="container-fluid icon-repeater-fluid-container pt-5 pb-5">
<div class="container icon-repeater-container pb-lg-5">
<div class="text-center d-flex flex-column flex-lg-row justify-content-center justify-content-lg-around">
<div class="p-3 learn-more-main">
<i class="far fa-address-card learn-more-icon"></i>
<p class="learn-more-labels">Learn More</p>
<div class="learn-more-content-container">
<div class="learn-more-content h-100 w-100 d-flex justify-content-center align-items-center p-3">
<i class="fas fa-caret-up learn-more-caret caret-1"></i>
<p class="mb-0 text-center">
I am a sentence that belongs under the Learn More container. I should really only be a few sentences.
</p>
</div>
</div>
</div>
<div class="p-3 learn-more-main">
<i class="fab fa-angular learn-more-icon"></i>
<p class="learn-more-labels">Angular Skills</p>
<div class="learn-more-content-container">
<div class="learn-more-content h-100 w-100 d-flex justify-content-center align-items-center p-3">
<i class="fas fa-caret-up learn-more-caret caret-2"></i>
<p class="mb-0 text-center">
I am a sentence that belongs under the Angular Skills. I should really only be a few sentences.
</p>
</div>
</div>
</div>
...
</div>
</div>
</div>
and here's the line of css that I'm using to show the appropriate div
.learn-more-main:hover .learn-more-content-container{
opacity:1;
}
If you hover over any of the .learn-more-main containers, it shows the appropriate text. But if you try to move your mouse into one of these text containers, it removes the appropriate container and puts the very last container there instead.
Set your:
.learn-more-content-container{
position: absolute;
bottom:0;
left:0;
right:0;
opacity:0;
transition: opacity .25s;
pointer-events: none;
And on hover your back to pointer-events: auto; :
.flex-column .learn-more-main:hover > .learn-more-content-container{
opacity:1;
pointer-events: auto;
}
Your problem was the opacity, elements are still there and moving mouse it was losing selection, if you would go with mouse up from bottom it always shows last one because it was last learn-more-main in your HTML markup.
I have to make a User Page for our club website, but I am using Materialize CSS instead of Bootstrap. I am having a hard time making it responsive. My content gets displays weirdly, text goes out of the box and buttons get glued together.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="container">
<div class="row">
<div class="col s12">
<div class="card horizontal hoverable" style="background: rgba(0, 0, 0, 0.3)">
<div class="card-image">
<img src="https://static.makeuseof.com/wp-content/uploads/2013/09/IE-automation8.png" style="width: 300px; height: 300px;">
</div>
<div class="card-stacked grey-text text-lighten-1">
<div class="row">
<div class="card-content" style="margin-top: -30px;">
<h3 class="light-blue-text"><b>Username</b></h4>
<p style="margin-top: -10px;">Developer</p>
<br>
<br>
<h5><b>Area of Interest</b></h4>
<p>HTML</p>
</div>
</div>
<div class="footer" style="margin-left: 5px; margin-bottom: 5px;">
<span><button class="btn #0d47a1 blue darken-4"><i class="fab fa-linkedin"></i> LinkedIn Profile </button></span>
<span><button class="btn #e65100 orange darken-4"><i class="fa fa-graduation-cap"></i>Profile </button></span>
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/devarshirawal0111/oj3nxLat/8/
Above link I have removed all attempts I made to make it responsive.
There were quite a few parts in your code that strayed from the materialize suggested structure.
1) In general, until you are familiar with what component you're working with, stick to the code samples:
<div class="row">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="https://lorempixel.com/100/190/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
</div>
Cards live in cols, which live inside rows.
2) Use card-action as your card footer, not .footer
There is no .footer class for cards. It is called .card-action:
<div class="card-action">
This is a link
</div>
3) Use .btn to give any element a button style:
<a class="btn" href="#" target="_blank"><i class="fa fa-graduation-cap"></i>Profile</a>
You had span > button > a - this is not necessary. Keep it simple. Any element can be made to look like a button just by adding .btn. Also, if your button text is too long, it will spill out or cut off. Not good. Make sure you're not putting unnecessary extra text into buttons. I took out the word 'profile' from linked in, the other solution would be to decrease font size or switch to a standard card to give more room for the footer.
4) Be careful what restrictions you're putting on your images, and also a standard card (image up top) can often work better. To make your image work better responsively, I took off the 300x height and instead gave it height:100% and object-fit:cover, which will fill the space better (object-fit is not supported in IE)
5) Lastly, gave your a tags a little margin so they have spacing when stacked on mobile.
Updated codepen here.
EDIT:
Added a second card example using Card Image, which places the card image at the top of the card.
https://materializecss.com/buttons.html
https://materializecss.com/cards.html
I write these code and made 2 grid using bootstrap.Now i want to the backgound image in the wrapper class.I tried it but i din't get success. Any idea about this?
.wrapper {
background-image: url(http://www.steamatic.com/images/footer-pattern-grey.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div class="wrapper">
<div class="col-md-6">
<div class=" flex">
<div class="media-left"> <i class="fa fa-home fa-3x"></i></div>
<div class="media-body">
<h4>Resenditial Services</h4>
</div>
</div>
<p class="para">Steamatic knows that the health and safety of your family is your first concern. Our restoration and cleaning services are all about providing you with the healthiest indoor environment possible.</p>
</div>
<div class="col-md-6">
<div class=" flex">
<div class="media-left"> <i class="fa fa-building fa-3x"></i></div>
<div class="media-body">
<h4>Commercial Services</h4>
</div>
</div>
<p class="para">We've been providing commercial clients money-saving and asset-protecting services for nearly five decades. Steamatic's full range of restoration and cleaning services means we have your business covered.</p>
</div>
</div>
I get the image in my background but i want to get full width image what i do?
U can show the image i upload
If you read the documentation of bootstrap, the cols are always wrapped in a row , if you want to wrap it in your own .wrapper class, then add
.wrapper{
overflow: hidden;
}
or you can try float: left; to .wrapper , its your choice
Add overflow: auto; to your .wrapper element.
You have to add overflow: hidden to your .wrapper class parent element of the two floating elements inside of it. So that if you add background image on your .wrapper it will show. Because, bootstrap grid classes are using float.
I am using Bootstrap and Font Awesome to make a table like the one from FAQ zalando.
So on the left side, there should be an icon, and on the right side, there should be text.
I want the text to be exactly under each other, they should not be out of alignment with each other. If I give the icons a span, then it will be ignored.
Here is my code:
<div class="row">
<i class="span2 icon-user "></i>
<div value='register' class="span4">
Registrierung
</div>
<i class="icon-mobile-phone span2"></i>
<div id='Newsletter' class="span4">
Newsletter
</div>
</div>
<div class="row">
<i class="icon-euro span2"></i>
<div value='kost' class="span4">
Kosten
</div>
<i class="icon-phone span2"></i>
<div id='probleme' class="span4">
Probleme
</div>
</div>
As an update to this, FontAwesome now has fixed-width support built in.
<i class="fa fa-fw fa-user"></i>
The fa-fw class supplies the fixed-width style.
Put your icon inside the element and make it behave as an inline-block so you can change its width and margin.
http://jsfiddle.net/LeBen/B9yjd/
Both, the original code of the Zalando website and the Fiddle by LeBen, are not "ideal" - espacially when it comes to HTML semantics.
Why having empty elements if you only want a background image for an element?
Just add the icon as background-image and set the padding-left for all these elements to the required value.
Just target the icons classes directly adding your styles in css:
[class*="btn-"]:before,
[class^=" btn"]:before {
margin-right: 1em;
}
And there's no need for an empty , just use:
<div class="row">
<div value='register' class="icon-user span4">
Registrierung
</div>
<div id='Newsletter' class="icon-mobile-phone span4">
Newsletter
</div>
</div>
just had this issue playing around with the options after not wanting to bang all my FontAwesome icons in spans/divs. Adding class 'fa-fw' did indeed solve it, but so does simply adjusting the width of the icon with CSS (maybe a new thing as this is an old post), so no extra classes needed if you have many icons. 'svg-inline--fa' was a common class for all my icons - see example
.item{
padding: 5px;
}
.svg-inline--fa{
font-size: 20px;
width: 40px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" defer></script>
<div class="item">
<i class="fas fa-bolt"></i>
Fast, local and friendly team
</div>
<div class="item">
<i class="fas fa-tags"></i>
Honest and transparent pricing
</div>
<div class="item">
<i class="fas fa-handshake"></i>
All our work is guaranteed
</div>
<div class="item">
<i class="fas fa-clipboard-check"></i>
Trained to the highest UK standards
</div>