I'm trying to add the HTML semantic tag <article> to my Bootstrap 4 code for cards.
The cards are also using h-100 so that they're equal height along the row. However, when I add the tag, instead of keeping a uniform height, each card becomes dependent on its content.
I have tried adding the article tag before the card and also immediately afterwards, but both attempts produced different results.
I've included the whole row in the code snippet; the last two cards without the article tag for comparison.
PLEASE NOTE: Click on the 'Full Page' option to see the snippet displayed properly _ thanks
Bootstrap4 snippet:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="container-fluid" id="">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h2 class="font styling classes">LOREM IPSUM</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card h-100">
<!-- article tag INSIDE .card div -->
<article>
<img class="card-img-top" src="" alt="" />
<div class="card-body d-flex flex-column">
<h2 class="font styling classes">article INSIDE .card</h2>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="center mt-auto">
<a class="btn mt-auto" href="#" target="_blank" title="Lorem ipsum">read more</a>
</div>
</div>
<!-- /.card-body -->
</article>
</div>
<!-- /.card -->
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<!-- article tag OUTSIDE .card div -->
<article>
<div class="card h-100">
<img class="card-img-top" src="" alt="" />
<div class="card-body d-flex flex-column">
<h2 class="font styling classes">article OUTSIDE .card</h2>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="center mt-auto">
<a class="btn mt-auto" href="#" target="_blank" title="Lorem ipsum">read more</a>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</article>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<!-- article tag = NONE -->
<div class="card h-100">
<img class="card-img-top" src="" alt="" />
<div class="card-body d-flex flex-column">
<h2 class="font styling classes">article = NONE</h2>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
<div class="center mt-auto">
<a class="btn mt-auto" href="#" target="_blank" title="Lorem ipsum">read more</a>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<!-- article tag = NONE -->
<div class="card h-100">
<img class="card-img-top" src="" alt="" />
<div class="card-body d-flex flex-column">
<h2 class="font styling classes">article = NONE</h2>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</p>
<div class="center mt-auto">
<a class="btn mt-auto" href="#" target="_blank" title="Lorem ipsum">read more</a>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</section>
<!-- /.container-fluid -->
</body>
</html>I've also tried finding out if <article> comes with native attributes but (not surprisingly?) haven't found anything online to say that it does.
Any help / advice would be appreciated
My thanks to @tromgy for their commented suggestion of using article instead of div for the .card element _ It worked!
<div class="col-lg-3 col-md-6 col-sm-12">
<article class="card h-100">
<img class="card-img-top" src="" alt="" />
<div class="card-body d-flex flex-column">
<h2 class="font styling classes">article INSTEAD of .div</h2>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="center mt-auto">
<a class="btn mt-auto" href="#" target="_blank" title="Lorem ipsum">read more</a>
</div>
</div><!-- /.card-body -->
</article><!-- /.card -->
</div>