Bootstrap 4 – Images

Class .img-fluid trong Bootstrap 4 giúp image Responsive theo thiết bị vẫn giữ được tỉ lệ hình ảnh gốc. Với thuộc tính max-width: 100% và height: auto.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <img src="https://editor.ecntt.com/img/samples/22l.jpg" class="img-fluid" alt="Sample photo">
  </div>

</body>

</html>

Class Rounded và Thumbnails

Class .rounded-* tạo border-radius giúp hình ảnh hiển thị bo tròn góc hay dạng hình tròn.
Class .img-thumbnail tạo border tròn 1 px xung quanh ảnh.

Các lớp này có thể áp dùng cho các phần tử khác không nhất thiết là image.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <img src="https://editor.ecntt.com/img/samples/8s.jpg" class="rounded" alt="Sample image">
    <img src="https://editor.ecntt.com/img/samples/9s.jpg" class="rounded-circle" alt="Sample image">
    <img src="https://editor.ecntt.com/img/samples/10s.jpg" class="img-thumbnail" alt="Sample image">
    <img src="https://editor.ecntt.com/img/samples/11s.jpg" class="rounded-top" alt="Sample image">
  </div>

</body>

</html>

Các class border radius bao gồm

  • rounded
  • rounded-top
  • rounded-right
  • rounded-bottom
  • rounded-left
  • rounded-circle
  • rounded-0

Image Alignment

Float

Bootstrap cung cấp các class .float-* để thêm thuộc tính float cho 1 ảnh left hay right. Bạn cũng có thể áp dụng class này theo kích thước màn hình hiển thị để responsive.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <img src="https://editor.ecntt.com/img/samples/9s.jpg" class="rounded-circle float-left" alt="Sample image">
    <img src="https://editor.ecntt.com/img/samples/10s.jpg" class="rounded-circle float-right" alt="Sample image">
  </div>

</body>

</html>

Các classes responsive float hình ảnh theo bên trái bao gồm: .float-left, .float-sm-left, .float-md-left, .float-lg-left, và .float-xl-left.

Các classes responsive float hình ảnh theo bên phải bao gồm: .float-right, .float-sm-right, .float-md-right, .float-lg-right,.float-xl-right.

Bạn có thể dùng .float-none và .float-*-none để disable float.

Canh giữa Images với Block-Level

Dùng .mx-auto và .d-block để canh giữa hình, lúc này hình như block và được margin: auto;

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <img src="https://editor.ecntt.com/img/samples/9m.jpg" class="img-circle mx-auto d-block" alt="Sample photo">
  </div>

</body>

</html>

Bạn có thể dùng các class .mx-*-auto để responsive.

Canh giữ Images với None-Block-Level

Để canh giữa hình bạn cũng có có thể sử dụng class .text-center hay .text-*-center trong element cha tương tự như text bình thường.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="text-center">
      <img src="https://editor.ecntt.com/img/samples/9m.jpg" class="img-circle" alt="Sample photo">
    </div>
  </div>

</body>

</html>

Để responsive bootstrap cung cấp các class sau .text-center, .text-sm-center, .text-md-center, .text-lg-center,.text-xl-center.

Bạn cũng có thể canh trái, phải với .text-left, .text-right, .text-*-left, hay .text-*-right.