Bootstrap 4 Images






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



Bootstrap 4 Images



❮ Previous
Next ❯


Bootstrap 4 Image Shapes



Rounded Corners:


Paris


Circle:


NYC


Thumbnail:


San Fran



Rounded Corners


The .rounded class adds rounded corners to an image:



Example



<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Try it Yourself »


Circle


The .rounded-circle class shapes the image to a circle:



Example



<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

Try it Yourself »


Thumbnail


The .img-thumbnail class shapes the image to a thumbnail
(bordered):



Example



<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Try it Yourself »





<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->




Aligning Images


Float an image to the right with the .float-right class or to the left with .float-left:







Example



<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">

Try it Yourself »


Centered Image


Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:







Example



<img src="paris.jpg" class="mx-auto d-block">

Try it Yourself »


Responsive Images


Images come in all sizes. So do screens. Responsive images automatically
adjust to fit the size of the screen.


Create responsive images by adding an .img-fluid class
to the <img> tag. The image will then scale nicely to the parent element.


The .img-fluid class applies max-width: 100%; and
height: auto; to the image:



Example



<img class="img-fluid" src="img_chania.jpg" alt="Chania">

Try it Yourself »


<!--

Responsive Embeds


Also let videos or slideshows scale properly on any device.


Classes can be applied directly to <iframe>, <embed>, <video>, and <object> elements.


The following example creates a responsive video by adding an .embed-responsive-item class
to an <iframe> tag (the video will then scale nicely to the parent element).
The containing <div> defines the aspect ratio of the video:



Example



<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Try it Yourself »


What is aspect ratio?

The aspect ratio of an image
describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3
(the universal video format of the 20th
century), and 16:9 (universal for HD television and European digital
television).




You can choose between two aspect ratio classes:




<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Try it Yourself »



Complete Bootstrap 4 Image Reference


For a complete reference of all image classes, go to our complete
Bootstrap 4 Image Reference.


-->



❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

Google Hardware Icons

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Google Hardware Icons ❮ Previous Next ❯ Hardware Icons Below is a list of all Google Hardware icons: Icon Description Example cast cast Try it cast_connected cast_connected Try it computer computer Try it desktop_mac desktop_mac Try it desktop_windows desktop_windows Try it developer_board developer_board Try it device_hub device_hub Try it devices_other devices_other Try it dock dock Try it gamepad gamepad Try it headset headset Try it headset_mic headset_mic Try it keyboard keyboard Try it keyboard_arrow_down keyboard_arrow_down Try it keyboard_arrow_left keyboard_arrow_left Try it keyboard_arrow_right keyboard_arrow_right Try it keyboard_arrow_up keyboard_arrow_up ...
Read more

SVG Filters

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> SVG Filters ❮ Previous Next ❯ SVG Filters SVG Filters are used to add special effects to SVG graphics. Browser Support The numbers in the table specify the first browser version that supports SVG filters.   SVG Filters 8.0 10.0 3.0 6.0 9.6 SVG Filter Elements In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG. The available filter elements in SVG are: <feBlend> - filter for combining images <feColorMatrix> - filter for color transforms <feComponentTransfer> <feComposite> <feConvolveMatrix> <feDiffuseLighting> <feDisplacementMap> <feFlood> <feGaussianBlur> <feImage> <feMerge> <feMorphology> <feOffset> - filter for drop sh...
Read more