Program:
Output:
Extra Large Devices:
Large Devices:
Medium Devices:
Small Devices:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>
<title>Breakpoints Bootstrap4</title>
<style>
/* Small devices min-width 576px (landscape phones) */
@media (min-width: 576px) {
body {
color: aqua;
background-color: black;
font-size: small;
}
}
/* Medium devices 768px (tablets) */
@media (min-width: 768px) {
body {
color: yellow;
background-color: black;
font-size: medium;
}
}
/* Large devices 992px(desktops) */
@media (min-width: 992px) {
body {
color: red;
background-color: black;
font-size: large;
}
}
/* Extra large devices 1200px (large desktops) */
@media (min-width: 1200px) {
body {
color: green;
background-color: black;
font-size: large;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-success">
<a class="navbar-brand" href="#">Breakpoints Bootstrap4</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="container mt-5">
<!--######################## START HERE #########################-->
<div class="row">
<p>
Mollit commodo cillum nulla adipisicing et. Duis sunt et enim consectetur minim exercitation ea culpa
officia laboris et labore sint. Enim eiusmod sit in in laborum. Anim tempor laboris consectetur nostrud
proident nulla irure. Nostrud excepteur sit qui Lorem cillum laborum. Veniam culpa non tempor laboris
nisi ea minim tempor minim sit.
<br><br>
Do sunt cupidatat ullamco occaecat ad quis dolor in quis. Consectetur reprehenderit laborum ex veniam eu
aliquip cillum voluptate id. Exercitation sint et deserunt adipisicing pariatur. Esse esse ut ex sint
sit minim enim ut eiusmod dolor quis nulla. Dolor minim nisi consectetur pariatur ex laboris eiusmod
pariatur magna officia sint. Quis consequat officia occaecat ipsum magna.
<br><br>
Minim reprehenderit exercitation velit eu ex eiusmod magna dolor occaecat esse laborum aute. Consequat
eiusmod eu laborum qui consectetur mollit esse irure. Cupidatat non ipsum anim commodo ut officia est
elit nisi ullamco ea. Irure aute qui occaecat Lorem cupidatat voluptate.
<br><br>
Laboris enim ex ipsum in minim nulla mollit sit quis elit sit. Nisi esse dolor tempor et aliquip dolore
sint sint. Irure anim cupidatat est sunt dolore proident aliquip cupidatat incididunt. Exercitation
fugiat proident fugiat aute anim ipsum dolore ullamco. Elit irure duis aliquip do dolor id dolore. Do
deserunt incididunt non incididunt aute magna do. Eu duis mollit est pariatur qui proident labore eu
excepteur Lorem ad consequat laboris.
<br><br>
Minim minim occaecat sunt quis consequat mollit voluptate incididunt consectetur sint. Consectetur ut
laboris tempor minim occaecat ullamco. Fugiat cupidatat commodo pariatur aute ut. Exercitation
reprehenderit et nostrud tempor adipisicing quis duis voluptate reprehenderit in nulla elit.
</p>
</div>
<!--######################## END HERE #########################-->
</div><!-- ./container -->
<div style="margin-top:500px;"></div>
<!-- BODY ENDS -->
</body>
</html>
Output:
Extra Large Devices:
Large Devices:
Medium Devices:
Small Devices:
