I've been building the responsive card collection with Bootstrap 5 and vue 3. With the container and the row classes, I can make the cards align to each at the same level. However, to make the timestamp (card-footer) attached to the bottom, I also use h-100 within the card classes. The timestamp is rendered as expected, but there's a gap between each row if the content changes, illustrated below.
I want to make the card align vertically close to have the same gap between the cards.
Is there any way for doing vertical alignment with Bootstrap?
Here is part of the code for now (with vue3):
<div class="container">
<div class="row justify-content-center">
<div class="card h-100 shadow-sm mt-3 mx-1" v-for="(newsPiece, index) in newsCollection" :key="index">
<!-- image can toggle description -->
<img :src="newsPiece.urlToImage" alt="image link lost" data-bs-toggle="collapse"
:data-bs-target="'#collapseImage'+index">
<!-- title -->
<h5><a :href="newsPiece.url" target="_blank">{{ newsPiece.title }}</a></h5>
<!-- toggle content from image -->
<div class="collapse" :id="'collapseImage'+index">
<div class="card-body-noborder">
<!-- {{ newsPiece.description }} -->
<span v-html="newsPiece.description"></span>
</div>
</div>
<div class="card-footer">
{{ newsPiece.publishedAt.replace('T',' ').replace('Z','') }}
</div>
</div>
</div>
</div>
As explained here, you're looking for a "Masonry" layout. The recommended method for Bootstrap 5 is to use the Masonry JS plugin.
Related
I am using a Bootstrap toast element in an ASP.NET web form as follows:
<asp:Content ID="ctMain" ContentPlaceHolderID="cpMain" runat="server">
<div aria-live="polite" aria-atomic="true" class="mt-4 d-flex">
<div class="toast text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true" id="toastFail" data-bs-delay="2000" data-bs-autohide="true">
<div class="toast-header"><strong class="mr-auto">Toast Title</strong></div>
<div class="toast-body"><span id="spnErr" /></div>
</div>
</div>
<section class="vh-50">
<!-- rest of page content -->
</section
</asp:Content>
Within my Javascript bit, I call the toast as so:
$('#toastFail').toast('show');
The toast shows up, but what I would like to do is have the toast center vertically in the page, but I can't find anything in the Bootstrap docs on how to do this. Can anyone give me some help on it? Thanks!
According to the Bootstrap documentation:
You can also get fancy with flexbox utilities to align toasts
horizontally and/or vertically.
Modify div class to:
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
Before using this class make sure that your toast has enough space around it.
I have created a group of cards in angular using a for loop like this:
<div class="row">
<div *ngFor="let dev_data of data" class="col-3">
<div class="card shadow">
<div class="card-body">
</div>
</div>
</div>
</div>
Here for one row there will be 4 cards,
In the bigger screen's the data inside the cards are being displayed properly, but when I open my application in mobile or ipad the cards are completely going out:
like this:
Bootstrap has predefined classes that help in displaying contents in responsive way. By using the class "col-3" you are saying bootstrap to display the contents to take 3 columns(Total of 12 Columns in Bootstrap) of the view no matter the display size.
So you can try like below code to instruct bootstrap to display content for 3 columns in md(Medium screen) and lg(Large Screen) and sm(Small Screen) to take the full width.
<div class="row">
<div *ngFor="let dev_data of data" class="col-md-3 col-lg-3 col-sm-12">
<div class="card shadow">
<div class="card-body">
</div>
</div>
</div>
</div>
Bootstrap Grid
<br>
<h6>
This row/deck contains two elements. You can see that even with col-md-4 it spans more than 2/3 of the width.
</h6>
<div class="flex-row">
<div class="card-deck">
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
</div>
</div> <br><br>
<h6>
This row/deck contains three elements. You can see that each card spaces 1/3 of the width as expected.
</h6>
<div class="flex-row">
<div class="card-deck">
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
</div>
</div>
</div>
https://jsfiddle.net/9e85Lb0y/
In this example there are two flex-rows each containing a card deck. The first deck has 2 cards and the second deck has 3 cards. All of the cards are identical. Why is it that the top row has wider cards? I would have expected the top row to have the same widths as the bottom row.
Columns aren't meant to be inside card-deck. They're only supposed to be contained in .row. The cards would go inside the columns.
From the Bootstrap docs...
"Rows are wrappers for columns... In a grid layout, content must be
placed within columns and only columns may be immediate children of
rows."
If you're trying to set widths for the cards in card-decks, see:
Bootstrap 4 card-deck with number of columns based on viewport, or
bootstrap 4 card-deck containing cards with different width
TLDR
Use flex-row and col-* to explicitly specify widths. Use card-deck and card to create evenly sized blocks. Avoid mixing the two, they are not designed for use together straight out of the box.
Long Answer
The issue here is most likely caused by the mixture of both the flex-row and card-deck classes. While both offer very similar functionality, there are some key differences which separate how they behave.
The card-deck class simply guarantees that any immediate elements with the card class are all the same width as one another.
<div class="card-deck">
<div class="card">
<!-- Content -->
</div>
<div class="card">
<!-- Content -->
</div>
<div class="card">
<!-- Content -->
</div>
</div>
Every <div class="card"></div> will now become a uniform width. They are not guaranteed to fill the whole of their parent container. The card class also applies left and right margins of 15px to keep them separated.
<div class="flex-row">
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
</div>
The flex-row and col-* classes on the other hand allow you to create columns of specific size. Each col-* class simply applies a width to the element, the onus is on you to make sure your content will fit appropriately at each breakpoint. col's SHOULD NOT have any margins applied as CSS width declarations do not account for margins.
I'm having some problems of respecting the grid of bootstrap 4. I have a content of col-sm-9 and a right sidebar of col-sm-3 float-right. But the sidebar does not start from the top, but start just after the end of col-sm-9. I would like to align both the column.
Here is how the page it is looking:
Here you can inspect the code of the page: Code
This is basically my html:
<section class="row clearfix" ng-cloak>
<div class="content-top no-gutters">
<div style="background-image: url({{post.better_featured_image.source_url}});" class="content-tracks-image">
</div>
<div class="content-featured-image">
<img>
</div>
</div>
<div class="clearfix"></div>
<div class="gs-track col-sm-9"><!--start player-->
<!---player--->
</div><!-- close player -->
<div class="col-sm-9 bg-white pt-3 pb-3" ng-cloak><!-- start content-->
<!--content->
</div><!-- close content -->
<div class="col-sm-3 float-right pt-3"><!-- start sidebar -->
<!-- sidebar -->
</div><!-- close sidebar -->
</section>
I was able to align the sidebar to the content but I had to move the sidebar box before the player, and I don't want to have this behaviour.
It was difficult working with your supplied link since when I tried to run the HTML I would not get the same content. But upon manually putting in my own content and trying to recreated I found that using bootstraps ROW on a container div worked.
<div class="row">
<div class="col-sm-9">CONTENT</div>
<div class="col-sm-3">SIDEBAR</div>
</div>
Try it and let me know if it works.
Is there something like Bootstrap panels in MaterializeCSS?
Bootstrap panels here:
http://www.w3schools.com/bootstrap/bootstrap_panels.asp
The closest thing to a Bootstrap panel would be called card-panel in Materialize CSS.
Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css" rel="stylesheet"/>
<!--Card Panel-->
<div class="card-panel">
<span class="black-text">A Basic Panel</span>
</div>
Cheers
Panel and well are abonded by bootstrap in their upcoming v4.0
Bootstrap Developer Explains Here..
Basically Cards are much better replacements of panels and you can get same results in them.
<div class="row">
<div class="col s4">
<div class="card darken-1">
<div class="card-content ">
<span class="card-title">Card Title</span>
<p>I am a very simple card.
I am good at containing small bits of information.
I am convenient because I require little markup to
use effectively.
</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
however if you like the look and feel of bootstrap panel with different title background and different body background then you'll have to stick with bootstrap not materializecss