align-items VS align-content:
First, align-items
is for items in a single row. So for a single row of elements on main axis, align-items
will align these items respective of each other and it will start with fresh perspective from the next row.
Now, align-content
doesn't interfere with items in a row but with rows itself. Hence, align-content
will try to align rows with respect to each other and flex container.
Check this fiddle : https://jsfiddle.net/htym5zkn/8/
class="no-gutters"
class="col-3 col-sm-4"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Bootstrap</title>
</head>
<body>
<style>
img {
width: 100%;
height: 200px;
max-height: 200px;
}
</style>
<div class="container" id="services">
<div class="row">
<section class="col-sm-8">
<img src="images/image.png" alt="sample image">
<h4>Exotic Pets</h4>
<p>We offer <strong>specialized</strong> care for <em>reptiles, rodents, birds,</em> and other exotic pets.</p>
</section>
<section class="col-sm-4">
<div class="row no-gutters">
<div class="col-3 col-sm-4"><img src="images/image.png" alt="sample image" class="img-thumbnail"></div>
<div class="col-3 col-sm-4"><img src="images/image.png" alt="sample image" class="img-thumbnail"></div>
<div class="col-3 col-sm-4"><img src="images/image.png" alt="sample image" class="img-thumbnail"></div>
<div class="col-3 col-sm-4"><img src="images/image.png" alt="sample image" class="img-thumbnail"></div>
</div>
</section>
</div><!-- row -->
</div><!-- container -->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Grid Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Bootstrap</title>
</head>
<body>
<style>
img {
width: 100%;
height: 100px;
max-height: 100px;
}
</style>
<div class="container" id="services">
<!-- ROW 1 -->
<div class="row bg-info align-items-center" style="height: 100vh;">
<div class="col">
<div class="row">
<section class="col">
<img src="images/image.png" alt="sample image">
<h4>Exotic Pets</h4>
<p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p>
</section>
<section class="col">
<img src="images/image.png" alt="sample image">
<h4>Grooming</h4>
<p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
</section>
<section class="col">
<img src="images/image.png" alt="sample image">
<h4>General Health</h4>
<p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings.</p>
</section>
</div><!-- row -->
</div><!-- column -->
</div><!-- row -->
<!-- ROW 2 -->
<div class="row bg-success" style="height: 100vh;">
<section class="col align-self-start">
<img src="images/image.png" alt="sample image">
<h4>Exotic Pets</h4>
<p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p>
</section>
<section class="col align-self-center">
<img src="images/image.png" alt="sample image">
<h4>Grooming</h4>
<p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
</section>
<section class="col align-self-end">
<img src="images/image.png" alt="sample image">
<h4>General Health</h4>
<p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings.</p>
</section>
</div><!-- row -->
<!-- ROW 3 -->
<div class="row bg-warning justify-content-center" style="height: 100vh;">
<section class="col-4">
<img src="images/image.png" alt="sample image">
<h4>Exotic Pets</h4>
<p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p>
</section>
<section class="col-4">
<img src="images/image.png" alt="sample image">
<h4>Grooming</h4>
<p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
</section>
</div><!-- row -->
</div><!-- container -->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
flex layout: a group of elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Bootstrap</title>
</head>
<body>
<style>
.item {
background: #f0ad4e;
text-align: center;
width: 150px;
height: 30px;
border: 1px solid white;
}
.item-nofixwidth {
background: #f0ad4e;
text-align: center;
padding: 10px 30px;
border: 1px solid white;
}
</style>
<div class="container bg-danger">
<div class="bg-info d-flex justify-content-center flex-wrap align-content-start" style="height:100vh">
<div class="item">Exotic</div>
<div class="item">Grooming</div>
<div class="item">Health</div>
<div class="item">Nutrition</div>
<div class="item">Pests</div>
<div class="item">Vaccinations</div>
</div>
</div><!-- container -->
<div class="container bg-primary">
<div class="bg-danger d-flex justify-content-center flex-wrap align-content-stretch" style="height:100vh">
<div class="item">Exotic</div>
<div class="item">Grooming</div>
<div class="item">Health</div>
<div class="item">Nutrition</div>
<div class="item">Pests</div>
<div class="item">Vaccinations</div>
</div>
</div><!-- container -->
<div class="container bg-primary">
<div class="bg-light d-flex justify-content-start flex-wrap align-content-stretch" style="height:100vh">
<div class="item-nofixwidth">Exotic</div>
<div class="item-nofixwidth">Grooming</div>
<div class="item-nofixwidth">Health</div>
<div class="item-nofixwidth">Nutrition</div>
<div class="item-nofixwidth">Pests</div>
<div class="item-nofixwidth">Vaccinations</div>
</div>
</div><!-- container -->
<div class="container bg-danger">
<div class="bg-info d-flex justify-content-center flex-wrap align-items-center" style="height:100vh">
<div class="item">Exotic</div>
<div class="item">Grooming</div>
<div class="item">Health</div>
<div class="item">Nutrition</div>
<div class="item">Pests</div>
<div class="item">Vaccinations</div>
</div>
</div>
<div class="container bg-warning">
<div class="bg-success d-flex justify-content-center flex-wrap align-content-center" style="height:100vh">
<div class="item">Exotic</div>
<div class="item">Grooming</div>
<div class="item">Health</div>
<div class="item">Nutrition</div>
<div class="item">Pests</div>
<div class="item">Vaccinations</div>
</div>
</div><!-- container -->
<div class="container bg-danger">
<div class="bg-info d-flex flex-sm-column-reverse" style="height:100vh">
<div class="item">Exotic</div>
<div class="item">Grooming</div>
<div class="item">Health</div>
<div class="item">Nutrition</div>
<div class="item">Pests</div>
<div class="item">Vaccinations</div>
</div>
</div><!-- container -->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>