How to insert pictures on bootstrap

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. Using the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to insert an image in Bootstrap

Insert the picture directly

In Bootstrap, you can use the HTML img tag to insert images directly:

 <code class="html"><img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="How to insert pictures on bootstrap"></code>

Using Bootstrap Image Component

Bootstrap provides an image component that provides responsive images and is able to set borders, rounded corners, shadows, and other styles:

 <code class="html"><div class="img-container"> <img class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="How to insert pictures on bootstrap"> </div></code>

Set the image size

Use img-fluid class to make images responsively scale on different devices and screen sizes:

 <code class="html"><img class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="How to insert pictures on bootstrap"></code>

Set borders

You can use img-bordered class to add borders to the image:

 <code class="html"><img class="img-bordered lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="How to insert pictures on bootstrap"></code>

Set rounded corners

You can use img-rounded class to add rounded corners to the image:

 <code class="html"><img class="img-rounded lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="How to insert pictures on bootstrap"></code>

Set shadows

You can use the shadow class to add shadow to the image:

 <code class="html"><img class="shadow lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="How to insert pictures on bootstrap"></code>

Resize and position the image

You can use CSS style to resize and position the image:

 <code class="css">img { width: 50%; float: left; }</code>

Use background image

You can use background-image CSS property to use the background-image CSS property:

 <code class="css">.my-class { background-image: url("image.jpg"); }</code>

The above is the detailed content of How to insert pictures on bootstrap. For more information, please follow other related articles on the PHP Chinese website!