The Bootstrap Image Responsive Approach

Recently more and more people are using smaller devices, like smartphones or tabs, to browse the internet. Previously, developers were required to design separate apps for mobile devices. Bootstrap image responsive web development was triggered by the popularity of mobile devices and the ability to write single applications for various devices.

However, using recent cutting-edge technology, we have modern browsers that support CSS3 and HTML5. It has simplified the process of designing responsive web applications, which is no longer optional but necessary.

This article will cover the benefits of using Bootstrap and explain its different file types and the process of making Bootstrap images responsive. By the end, you will know how Filestack can benefit your workflow by making image-responsive applications. Filestack also offers a drag-and-drop file upload solution.

What is Bootstrap?

Bootstrap[1] is the most popular open-source CSS framework. It has prebuilt components, responsive grid systems, and global CSS settings. It is mainly used for building responsive websites and mobile-first apps. Now Bootstrap 5 is the newest version of Bootstrap.

Bootstrap allows web developers to build websites faster, because they don’t need to worry about basic commands and functions. It consists of HTML, CSS, and JS-based scripts for various web design-related functions and components.

What makes a Bootstrap image responsive?

Flexible layouts are fundamental to responsive images. It adjusts the image size, orientation, and resolution based on the end-user device. It enables webpages to detect and respond to the screen conditions of visitors.

Image responsive feature is vital to web development. The easiest way to make an image responsive is to give a new value to its width property. We can set the value as 100%, then the height of the image will adjust itself automatically. We must use relative units for the width property, like percentage, rather than absolute ones, like pixels.

Why are Bootstrap responsive images used?

The concept originated to solve issues, such as serving different image sizes to other devices. The responsive image feature is crucial, because it helps us deliver optimal file size and the right image for the correct screen size, improving user experience and loading time. It is vital to have various versions of the image to create a responsive image.

What are the three primary files of Bootstrap?

Bootstrap comes with the syntax [2] compiled in three primary files, named Bootstrap.css, Bootstrap.js, and Glyphicons. We should remember that Bootstrap requires a jQuery library to run JS plugins and components.

The following three primary framework files manage a website’s user interface and functionality:

1. Bootstrap.css

To arrange and manage the layout of a website, a CSS framework named Bootstrap.css is required. HTML deals with the content and structure of a web page, whereas CSS deals with the layout itself. That’s why both formats need to coexist to perform a particular action.

• Bootstrap.css helps developers create a uniform look on as many pages as needed.
• We don’t need to code from scratch. Instead, we need to refer a web page to a CSS file.
• Bootstrap.css functions are not limited to text styles; they are applied to other aspects of a website, such as tables and image layouts.
• The CSS cheat sheet can ease your learning process.

2. Bootstrap.js

Boostrap.js file is the core part of Bootstrap. It contains JavaScript files responsible for the website’s interactivity. To save time, developers use jQuery syntax, a popular open-source, cross-platform JavaScript library, to save time.

Few examples of what jQuery can do:

• It can perform AJAX requests, like dynamically subtracting data from another location.
• It can create widgets using a collection of JavaScript plugins.
• Using CSS properties, it can create custom animations.
• Bring dynamics to the website’s content.

We must remember that Bootstrap with CSS properties and HTML elements can function just fine, but it needs jQuery to create a responsive design. If not, we can only use the bare, static parts of the stylesheet language.

That’s why software engineers must know jQuery, as it’s an essential part of web development.

3. Glyphicons

• Bootstrap icons are called Glyphicons, which include a Glyphicons Halflings set.
• Icons often display actions and data within the user interface and are an integral part of the front end of a website.
• Websites like Flaticon, GlyphSearch, and Icons8 provide theme-specific icons for free.

Prerequisites for Bootstrap image responsive

Before starting responsive images for our page, we need the Bootstrap CSS and JavaScript bundles by downloading their latest compiled files.

Otherwise, we can add required Bootstrap scripts from the free JSDeliver content delivery network (CDN).

First, we need to add this code to the HTML document’s head:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Then, we add this JS file to the end of the <body> tag:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

The code used for both Bootstrap and Popper is now bundled into one file.

Initial template

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Bootstrap JS –->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

 

HTML Doctype declaration

If we miss the doctype declaration in Bootstrap, some styling operations do not work correctly. Hence, we must do it accordingly.

As we are using HTML5 so we must declare it first.

<!doctype html>
<html lang="en">
  ...
</html>

Responsive meta tag

In practical use, Bootstrap tends to mobile-first approach by first optimizing code for mobile devices and then scaling with CSS media queries for larger screen sizes. Hence, we just add the meta tag to the page header to ensure proper responsive rendering, as given below:

<meta name="viewport" content="width=device-width, initial-scale=1">

Box-sizing

To prevent the padding from affecting the final width of an element and to fit images easily in CSS,  Bootstrap switches the box-sizing value from the default content box to the border box. As an override, set box-sizing to the content-box value:

.example-selector {
  box-sizing: content-box;
}

How to create responsive images with Bootstrap?

Bootstrap classes are essential elements in making images responsive. Applying the below four bootstrap classes, you can correctly display images and make them responsive to various screen sizes. Consequently, those images do not overflow their parent element. Instead, they change as the parent changes size while retaining the aspect ratio.

The .img-fluid class makes an image responsive by automatically applying max-width: 100% and height: auto to it. The result shows:

• The image scales with the parent element’s width.
• The browser does not make the image more extensive than its container.
• The image does not grow to be larger than its original size, reducing quality.
• The image scales down if the viewport becomes narrower than the specified width.
• To set up the .img-fluid class in your images, simply define the <img> tag like this:

<img src="..." class="img-fluid" alt="...">

Using <picture> Element

We can combine the Bootstrap .img-* classes, such as img-fluid, with the <picture> element to specify multiple images for responsive design or other purposes. Now we can add those classes to the specific <img> Tag and not to the <picture> Tag, as in this example:

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Using Image Thumbnails

Bootstrap’s border-radius utilities [3] are handy for styling border elements. For example, images and buttons. Like the class .img-thumbnail gives the image a rounded border with a one-pixel width for a professional thumbnail look:

<img src="..." class="img-thumbnail" alt="...">

Using Alignment of Images

Float classes align text or images of Bootstrap, and always appear at the start or end of the parent element:

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

In the case of center block-level images, we’ll use the .mx-auto margin-utility class:

<img src="..." class="rounded mx-auto d-block" alt="...">

To center an image in a <div> element, we’ll use the text-center class:

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

For all the codes mentioned above, please see the documentation of Bootstrap.

Automating Responsive Images With Filestack:

To make your website images responsive, there is no need to be a CSS expert. Also, thanks to Filestack, you can start right now! Filestack is not just a file uploader but also helps users easily enhance and manipulate images. That’s why it offers fully responsive images through its JavaScript library.

The magic behind this is passing the image source to a new attribute, data-fp-src, so that Filestack API will make it responsive for you.

<img data-fp-src="https://d1wtqaffaaj63z.cloudfront.net/images/R0000403.jpg"/>

We can further customize its behavior through IMG Tag [4] parameters:

data-fp-apikey: The API key for your Filestack application.

data-fp-on-resize: Defines whether the image should be reloaded on screen size change. Remember, the default setting is data-fp-on-resize=”all“.

data-fp-pixel-round: Resizes images by rounding to the nearest number of pixels.

data-fp-policy: Defines the security policy for the given application.

data-fp-signature: Security signature for the given application.

Additionally, you can check out this tutorial.

What are the shortcut options for responsive images with Filestack?

It is simple! Passing the parameters such as data-fp-key, and data-fp-on-resize to each image on your website can be a little inconvenient, as the number of HTML attributes rapidly increases. Still, thanks to JavaScript, you can set them globally:

<script>
  filepicker.setKey("your_api_key");
  filepicker.setResponsiveOptions(
    {
      onResize: 'down',
      pixelRound: 50,
      policy: 'your_policy',
      signature: 'your_signature',
    },
  );
</script>
<img data-fp-src="https://www.filestackapi.com/api/file/bFNaEmxTZmO5I7yLN2hN"/>

Furthermore, Filestack provides a convenient method ‘responsive’ that can trigger the full lookup of all of the images referenced by data-fp-src in your responsive tags or a subset:

Full lookup

filepicker.responsive()

Subset

const img = document.querySelector('.my-img');
filepicker.responsive(img);

Ready to start creating a robust Bootstrap image responsive application using Filestack?

In conclusion, Filestack is the #1 developer service for uploads. Get user content from anywhere and also improve file or video uploads with powerful, easy-to-use Filestack. It makes API uploads, URL ingestion, and iOS/Android device integration fast and easy. That’s not all; you can still make responsive images using Filestack.

So, what are you waiting for? Head over to Filestack and sign up for free today!

 

References

1. https://getbootstrap.com/
2. https://www.w3schools.com/bootstrap4/
3. https://www.codegrepper.com/code-examples/whatever/border+radius+utilities+bootstrap+4
4. https://getbootstrap.com/docs/4.0/content/images/

Read More →