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.
Related
I am trying to make these cards the same height no matter how long the title of the movie is. The cards are dynamically created and I am also using swiperjs as the carousel. These are mdBootstrap cards just to clarify. Here is my code.
<div class="swiper-container">
<div class="swiper-wrapper trending_movies">
<!-- dynamic cards go here -->
<div class="swiper-slide">
<div class="card">
<div class="icon-button">
<ion-icon name="ellipsis-horizontal-circle-sharp" class="ion-icon"
data-movie="${el.title}"></ion-icon>
</div>
<a href="${`/client/views/movies.html?movieId=${el.id}&movie=${el.title}`}" data-src="${el.id}" >
<img class="img-size" src="${poster_image}" alt="${el.title}">
</a>
<div class="card-body">
<h6 class="card-title"> ${el.title}</h6>
<p>${el.release_date}</p>
</div>
</div>
</div>
</div>
</div>
You can use this property in you CSS file like this other wise gave margin to your p tag to control this issue.
.card-body{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I am trying to get a card to have a tiled background image. To get a single image background I use:
<div class="card img-fluid">
<img class="card-img-top" src="images/backcard-brushedmetal.jpg">
<div class="card-img-overlay">
<div class="card-body text-justify">
<h3 class="articleh3">xxxDescriptionxxx</h3>
<p>
<img src="images/xxxImagexxx.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;float: left" />
xxxSomeTextHerexxx
</p>
</div>
</div>
</div>
My problem is that I use cards of different sizes and right now my image size is governing the size of my card; I guess I want it the other way round (the card to govern the size of the displayed background). So I wondered if it was possible to tile a background image so it just fills the background and then it shouldn't matter what size the card or image is.
For all I know, this may not even be possible and if not, that's fine, I'll look for another way to do something like :)
Anyway, thanks for any advice :)
James
If the only purpose of using img element is as a background - use background-image CSS property which sets background image on an element.
Edit per comments:
Obviously the float part cause some "problems" on the given markup, BUT there is something more out there... Can't figure myself why this not working - so i remove BS4 (added 2 examples):
.card.img-fluid {
background: url(http://www.rocksquad.co.uk/images/backcard-brushedmetal.jpg) no-repeat;
background-position: center;
background-size: cover;
}
<div class="card img-fluid">
<div class="card-img-overlay">
<div class="card-body text-justify">
<h3 class="articleh3">xxxDescriptionxxx</h3>
<p>
<img src="http://www.rocksquad.co.uk/images/backcard-brushedmetal.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;" />
xxxSomeTextHerexxx<br>xxxSomeTextHerexxx
</p>
</div>
</div>
</div>
<hr>
<div class="card img-fluid">
<div class="card-img-overlay">
<div class="card-body text-justify">
<h3 class="articleh3">xxxDescriptionxxx</h3>
<p>
<img src="http://www.rocksquad.co.uk/images/backcard-brushedmetal.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;" />
xxxSomeTextHerexxx<br>xxxSomeTextHerexxx<br> xxxSomeTextHerexxx<br>xxxSomeTextHerexxx<br> xxxSomeTextHerexxx<br>xxxSomeTextHerexxx<br> xxxSomeTextHerexxx<br>
</p>
</div>
</div>
</div>
This question need some "bootstrap 4 expert" to answer on - clearly this is not me (:
Old (not working) answer:
In your case, since you want the image would cover the element, you can do something like that:
<style>
.card.img-fluid {
background: url(images/backcard-brushedmetal.jpg) no-repeat;
background-position: center;
background-size: cover;
}
</style>
<div class="card img-fluid">
<div class="card-img-overlay">
<div class="card-body text-justify">
<h3 class="articleh3">xxxDescriptionxxx</h3>
<p>
<img src="images/xxxImagexxx.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;float: left" />
xxxSomeTextHerexxx
</p>
</div>
</div>
</div>
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'm having an issue where any Bootstrap v4 cards using the card-img-overlay to display text over an image prevents links below that image from working.
These links do work:
<div class="card" style="border-color: #333;">
<img class="card-img-top" src="..." alt="Title image"/>
<div class="card-inverse">
<h1 class="text-stroke">Title</h1>
</div>
<div class="card-block">
Card link
<p class="card-text">Article Text</p>
</div>
<div class="card-footer">
<small class="text-muted">Date - Author</small>
</div>
</div>
These links do NOT work:
<div class="card" style="border-color: #333;">
<img class="card-img-top" src="..." alt="Title image"/>
<div class="card-img-overlay card-inverse">
<h1 class="text-stroke">Title</h1>
</div>
<div class="card-block">
Card link
<p class="card-text">Article Text</p>
</div>
<div class="card-footer">
<small class="text-muted">Date - Author</small>
</div>
</div>
I see there is an open issue regarding this for bootstrap v4, but can anyone help with a workaround that would preserve the same look?
The overlay is position: absolute which gives that element a z-index, and the rest of the content in the card is statically positioned, so none of it has a z-index. You can give the link a z-index by adding a non-static position, and since your card link comes after the overlay in the HTML, the stacking order will put the card link's stacking order on top of the overlay.
.card-link {
position: relative;
}
As mentioned by Michael Coker, adding the below to your css resolves this issue.
.card-link {
position: relative;
}
I am trying to use the Enigma theme on my WP site.
It allows you to add a logo about 200px wide which works with the responsiveness of the site.
However, I want to upload a much wider image, which then resizes as the screen gets smaller.
I added a class to the image file and tried to target it with css
max-width: 100%;
height: auto;
I am familiar with media queries but nothing I do is working.
Here is the theme, this is an example site, not the real site I am working on but it presents the same problem.
http://bestgirlsonearth.com
I've erased my work on it just to show the theme as is.
Due to fluid-system-column of bootstrap your image is located in a 6col "col-md-6" and by definition that class can't take more space or less than her parents middle weight (here row)
I'm not a user of Twitter Bootstrap but i think you should change in your header.php to have two rows and your full-sized img :
<div class="row ">
<div class="col-md-6 col-sm-12">
<div class="logo">
<a href="http://bestgirlsonearth.com/" title="Best Girls on Earth" rel="home">
<img src="http://bestgirlsonearth.com/wp-content/uploads/2014/10/bgeheader3.png" style="height:182px; width:1023px;">
</a>
<p>The finest women on the planet</p>
</div>
</div>
<div class="col-md-6 col-sm-12">
<ul class="head-contact-info">
//you contact info
</ul>
</div>
</div>
by this :
<div class="row ">
<div class="col-md-12 col-sm-12">
<div class="logo">
<a href="http://bestgirlsonearth.com/" title="Best Girls on Earth" rel="home">
<img src="http://bestgirlsonearth.com/wp-content/uploads/2014/10/bgeheader3.png" style="/* height:182px; */ /* width:1023px; */"></a>
<p>The finest women on the planet</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<ul class="head-contact-info">
// Your contact infos
</ul>
</div>
</div>
cheers,