Tutorial references

c
c++
c#

Tutorial references

chapters

Bootstrap 4 Images


Responsive

.img-fluid class create an image scale across device.It uses max-width:100%; and and height:auto;

.img-fluid use for responsive image.

NOTE: Bootstrap 3.0 use .img-responsive for responsive image.

Example

Try yourself

rounded images

.rounded uses to round all corners of image.

.rounded-top use to round top corners of image.

.rounded-left use to round left corners of image.

.rounded-right use to round right corners of image.

.rounded-bottom use to round bottom corners of image.

.rounded-circle use to create circle of image. If your image height and width is not same then your image can not be in circle.

Example

Try yourself

Thumbnail

.img-thumbnail use to create rounded border of image.

Example

Try yourself

float

.float-left, .float-xl-left, .float-lg-left, .float-md-left, .float-sm-left use to float an image from left.

.float-right, .float-xl-right, .float-lg-right, .float-md-right, .float-sm-right use to float an image from right.

Example

Try yourself

.float-none and .float-**-none use to disable floating.

center

.mx-auto with .d-block use to create image in center.

Example

Try yourself

You can use .mx-**-auto to create image in center. with .d-block


About Us

This website(www.sabbla.com) is very useful for beginners and professional developers. Sabbla provides tutorial in simple language. It provides latest technology tutorial which very useful for developers.

See More...

Contact Us

+91 9971366710

+91 9717983128

info@sabbla.com

Buxar, Bihar, India, Pin No.- 802131

Services

Sabbla is providing free latest technology tutorials. All tutorials are free for beginner and professionals.


Terms of Use

sabbla.com is not responsible for any mistake. Users can inform to sabbla.com for any mistake. But sabbla.com always try for 0-0 mistake.

Privacy policy

Currently sabbla.com does not collect any data from users.

                   

copyright © 2017-2018