Căn trái và phải trên cùng một dòng bootstrap

Trong bài viết này, tôi sẽ trình bày cách căn chỉnh hình ảnh và văn bản trên cùng một dòng trong bootstrep với hướng dẫn từng bước

Chúng tôi biết rằng việc thêm hình ảnh vào trang web sẽ làm cho trang web hấp dẫn và dễ nhìn hơn. Đôi khi, chúng ta cần căn chỉnh hình ảnh ở bên phải hoặc bên trái. Hầu hết thời gian, chúng tôi đặt một hình ảnh ở trung tâm

Ở đây, chúng tôi sẽ sử dụng các lớp .d-fle và align-items-center. Trong Bootstrap, “d-flex” chỉ định đặt phần tử hiển thị dưới dạng flex. Lớp align-items-center chỉ định thuộc tính align-items: center

        
            
      
Right aligned text on viewports sized SM [small] or wider.
      
Right aligned text on viewports sized MD [medium] or wider.
      
Right aligned text on viewports sized LG [large] or wider.
      
Right aligned text on viewports sized XL [extra-large] or wider.
    
       
        
    

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn trong hành trình của bạn. Bắt đầu với 200 đô la tín dụng miễn phí

Đôi khi có thể hữu ích khi một số văn bản được căn lề trái và một số văn bản được căn lề phải trên cùng một dòng. Ví dụ: ở chân trang, nơi bạn có thể muốn có thông tin bản quyền ở bên trái và thông tin quản trị trang web ở bên phải. Đây là cách bạn có thể muốn HTML của mình

  
Text on the left.
  
Text on the right.

Nếu bạn định cung cấp cho các lớp CSS của mình các giá trị alignleft và alignright của text-align. trái; . đúng; . Thay vào đó, chỉ thả nổi đoạn văn của bạn

Trong hướng dẫn này, hãy tìm hiểu cách căn trái, căn phải và nút căn giữa bằng Bootstrap. Câu trả lời ngắn gọn là. đầu tiên bọc các nút bên trong phần tử