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;
}
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.
So bit of background on my issue. I'm using an external carousel and I am trying to modify each image section to include text. There seems to be an overflow:hidden on the sp-carousel-frame class that is making it not visible but without this the unselected images on either side go full size.
I basically need the item-text class to be displayed.
I really hope I explained this ok.
I'm going include an image that shows the issue below.
HTML
<script src="https://wordpress-84115-1849710.cloudwaysapps.com/wp-content/themes/inspiration-marketing-theme/assets/js/carousel.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container collaboration-header">
<div class="row">
<div class="col-md-12">
<h1>Collaboration and Teamwork</h1>
</div>
</div>
</div>
<div class="container main-carousel">
<div class="row">
<div class="col-md-12">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello World
</div>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.collaboration-header h1{
text-align: center;
padding: 1.5em 0;
}
.main-carousel {
margin-bottom: 20% !important;
}
The JSFiddle Below:
Here is my JSFiddle
Add Class this carousel-caption on item-text
<div class="item-text carousel-caption">
Hello World
</div>
https://jsfiddle.net/lalji1051/3hyb82fg/1/
OK I got it solved basically although I probably need to tweak it a bit to get it perfect what I did was disable the overflow:hidden on the sp-carousel-frame and change it to visible. Then on the parent div col-md-12 I attached another class called overflow:
HTML
<div class="col-md-12 overflow">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello Hows it going like
</div>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div><!-- End sp-carousel-frame -->
<hr />
</div><!-- Close Col-md-12 -->
CSS:
.sp-carousel-frame {
overflow: visible !important;
}
.overflow {
overflow: hidden !important;
padding: 0 !important;
}
Updated JSFiddle
How can I adjust my 'card' so that it is displayed across the entire width of the screen?
I am using bootstrap
<div class="card">
<h4 style="margin-top: 5px; width: 100%;">{{$tipo->tipo }}</h4>
</div>
i need width similar to footer
If you are using the latest Bootstrap 4 then this code will create a card across the entire width:
<div class="card w-100 mt-2">
<h4>Restaurante</h4>
</div>
If there is still a gap then it is likely you have padding on the container div surrounding the card, so you would need to remove that.
the first thing you need to notice it's that card class display is flex in bootstrap.Also card-body has a 20px padding.So the first thing you need is use p-0 in card-body then devide your card body to multi row.So you below code:
<div class='card'>
<div class='card-img-top'>
<img src='...' />
</div>
<div class='card-body p-0'>
<div class='row mx-0'>
<div class='col-12 p-2'>
...card content
</div>
</div>
<div class='d-block px-0'>
<h4>Your footer</h4>
</div>
</div>
</div>
if you put a clear image to view what you want,I will help you more.I hope I could help you.
I am developing an application using Vue.js and Bootstrap. I am looking to develop a folder to look like this:
But, I am unable to align the contents to make sure that it looks like in the above picture.
The picture currently looks like this:
Here is the code:
<div class="col-xl-3 col-md-6">
<stats-card>
<div slot="header" class="folderRectangle">
<div class="row">
<div class="col-3">
<div class="clearfix">
<i class="material-icons" id="folder-image">folder</i>
</div>
</div>
<div class="col-9">
<div class="clearfix" style="position: relative">
<div>
<p style="text-align: left">Folder Name</p>
</div>
<div>
<p style="text-align:left">20 files</p>
</div>
</div>
</div>
</div>
</div>
</stats-card>
</div>
What wrong am I doing? How do I make sure that the folder icon aligns to the top and text floats to the center?
Instead of using .row and .col-*, you can use the media object already available in Bootstrap to produce this layout.
/* demo only */
.media {
border: 1px solid #ddd;
padding: 1.5rem;
margin: 1rem;
}
img {
max-width: 25px;
}
.media-body {
font-size: 0.75rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="media">
<img class="mr-3" src="https://png.pngtree.com/element_our/png/20181213/folder-vector-icon-png_267455.jpg" alt="Generic placeholder image">
<div class="media-body">
<h6 class="mt-0 mb-1">Folder name</h6>
<div>20 files</div>
</div>
</div>
The best possible way to achieve what you are trying is to use CSS Flex property.
Just give display flex to the parent (col-9) in your case.
Provide align items to be center.
and at last flex alignment to row.
this will make you achieve the above design
You can read about CSS flexbox more here
https://www.w3schools.com/css/css3_flexbox.asp
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;
}