07-pokrocile-techniky/bootstrap-responsive.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap responsive</title>

		<!-- Bootstrap compiled and minified CSS -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>


  <body>

    <div class="container">

      <!-- http://getbootstrap.com/css/	-->

      <h1>Bootstrap responsive layout</h1>

      <div class="row">

        <div class="d-xs-block">Visible on <strong>phones</strong></div>

        <div class="d-sm-block">Visible on <strong>tablets</strong></div>

        <div class="d-md-block">Visible on <strong>desktops</strong></div>

        <div class="d-lg-block">Visible on <strong>BIG desktops</strong></div>


        <div class="d-xs-none">Hidden on <strong>phones</strong></div>

        <div class="d-sm-none">Hidden on <strong>tablets</strong></div>

        <div class="d-md-none">Hidden on <strong>desktops</strong></div>

        <div class="d-lg-none">Hidden on <strong>BIG desktops</strong></div>


        <div class="d-print-block d-none">Visible while printing</div>

        <div class="d-print-none">Hidden while printing</div>
      </div>


      <h2>Responsive images</h2>

      <img src="mustang-1967.jpg" alt="Ford Mustang 1967" width="1807" height="1200" class="img-fluid"/>


      <h2>Responsive embed</h2>

			<div class="ratio ratio-16x9">
				<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
			</div>

    </div>


  </body>

</html>