Bootstrap Imagenes

RESULTADO FINAL

MOSTRAR IMAGENES

AHORA MODIFICAMOS EL BODY DE LA SIGUIENTE MANERA:

CODIGO FINAL:

⟨!DOCTYPE html⟩
⟨html lang="en"⟩
⟨head⟩
  ⟨title⟩Programación Declarativa⟨/title⟩
  ⟨meta charset="utf-8"⟩
  ⟨meta name="viewport" content="width=device-width, initial-scale=1"⟩
  ⟨link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"⟩
  ⟨script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"⟩⟨/script⟩
  ⟨script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"⟩⟨/script⟩
⟨/head⟩
⟨body⟩
⟨br⟩
⟨div class="container" style="background-color:#CCC;text-align:center;"⟩
  ⟨h3 class="text-success"  ⟩Esquinas redondeadas⟨/h3⟩⟨br⟩
 ⟨div class="row"⟩
  ⟨div class="col-sm-4"⟩
  ⟨img src="../powerby/bshell.fw.png" class="img-rounded"     width="200" ⟩ ⟨br⟩
  ⟨p class="text-primary"⟩Esquinas redondeadas⟨/p⟩⟨br⟩
  ⟨/div⟩
  ⟨div class="col-sm-4"⟩
  ⟨img src="../powerby/bshell.fw.png" class="img-circle"     width="200" ⟩ ⟨br⟩
  ⟨p class="text-primary"⟩Esquinas circulares⟨/p⟩⟨br⟩
  ⟨/div⟩
  ⟨div class="col-sm-4"⟩
  ⟨img src="../powerby/bshell.fw.png" class="img-thumbnail"  width="200" ⟩ ⟨br⟩
  ⟨p class="text-primary"⟩Esquinas con margen⟨/p⟩⟨br⟩
  ⟨/div⟩
 ⟨/div⟩

  ⟨hr⟩
  ⟨h2⟩GALERIA DE IMAGENES SIMPLE⟨/h2⟩
  ⟨p⟩da clic en la imagen⟨/p⟩
  ⟨div class="row" align="center"⟩
    ⟨div class="col-md-3"⟩
      ⟨div class="thumbnail"⟩
        ⟨a href="../powerby/bshell.fw.png" target="_blank"⟩
          ⟨img src="../powerby/bshell.fw.png" alt="Lights" style="width:100%"⟩
          ⟨div class="caption"⟩
            ⟨p⟩Logo de Bourne Shell.⟨/p⟩
          ⟨/div⟩
        ⟨/a⟩
      ⟨/div⟩
    ⟨/div⟩
    ⟨div class="col-md-3"⟩
      ⟨div class="thumbnail"⟩
        ⟨a href="../powerby/ubuntumate2.fw.png" target="_blank"⟩
          ⟨img src="../powerby/ubuntumate2.fw.png" alt="Lights" style="width:100%"⟩
          ⟨div class="caption"⟩
            ⟨p⟩Logo de Ubuntu Mate.⟨/p⟩
          ⟨/div⟩
        ⟨/a⟩
      ⟨/div⟩
    ⟨/div⟩
    ⟨div class="col-md-3"⟩
      ⟨div class="thumbnail"⟩
        ⟨a href="../powerby/libreoffice.fw.png" target="_blank"⟩
          ⟨img src="../powerby/libreoffice.fw.png" alt="Lights" style="width:100%"⟩
          ⟨div class="caption"⟩
            ⟨p⟩Logo de Libreoffice.⟨/p⟩
          ⟨/div⟩
        ⟨/a⟩
      ⟨/div⟩
    ⟨/div⟩
  ⟨/div⟩
⟨/div⟩
⟨/body⟩
⟨/html⟩