BootStrap 5(BS 5)の学習4

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236">

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 

<img src="paris.jpg" class="float-start" alt="Paris" width="304" height="236"> 
  <img src="paris.jpg" class="float-end" alt="Paris" width="304" height="236"> 

<img src="paris.jpg" class="mx-auto d-block" style="width:50%"> 

<img class="img-fluid" src="ny.jpg" alt="New York" width="1100" height="500">

 <div class="alert alert-success">
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong> This alert box could indicate a neutral informative change or action.
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> This alert box could indicate a warning that might need attention.
  </div>
  <div class="alert alert-danger">
    <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
  </div>
  <div class="alert alert-primary">
    <strong>Primary!</strong> Indicates an important action.
  </div>
  <div class="alert alert-secondary">
    <strong>Secondary!</strong> Indicates a slightly less important action.
  </div>
  <div class="alert alert-dark">
    <strong>Dark!</strong> Dark grey alert.
  </div>
  <div class="alert alert-light">
    <strong>Light!</strong> Light grey alert.
  </div>

<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.

<div class="alert alert-success alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>

<div class="alert alert-success alert-dismissible fade show">