Table of contents
1.
Introduction
2.
Starter Files
3.
Images
3.1.
Image resizing
3.2.
Alignment
3.3.
Image shapes
3.4.
Image captions
4.
Codes
4.1.
Special Cases
5.
Frequently Asked Questions
5.1.
What is bootstrap?
5.2.
How to add responsive images?
5.3.
How to add inline codes?
5.4.
How to add blocks of codes?
5.5.
Can we represent key presses in some special way?
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

Bootstrap Images and Code

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Hey Ninjas, while making our websites, we sometimes need to add images and codes to them. This could be a hassle. But don’t worry. Bootstrap got you covered. 

Introduction

You can use the inbuild classes in the image tag and some other tags, which could help format the text, so it looks like code, variable, or expression.

Starter Files

To start using bootstrap on a website, we need to include its CDN in the <head> of the HTML code.

<!-- 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">

 

Many of the bootstrap components need the use of JavaScript to function to add functionality to the website. So, we have to place the below script in the HTML code just before the </body>.

<!-- Js files-->
    <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>

Images

Bootstrap provides various classes and styles to support images. Some of the key features of Bootstrap's support for images include:

Image resizing

Bootstrap includes classes to easily resize images to various sizes, such as "img-fluid" to make images responsive and scale to their parent container. Let us see an example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 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>Document</title>
</head>

<body>
    <!-- Responsive Image  -->
    <div class="container">
        <img src="image2.jpg" class="img-fluid" alt="Responsive image">
    </div>

    <!--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>
</body>

</html>

 

Output:
On large Screen

Output On large screen

On small Screen

Output On small screen

We can see that the image becomes responsive, it is self-adjusting the size.

Alignment

Bootstrap provides classes to align images left, right or center, such as "text-center" to center an image.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 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>Document</title>
</head>

<body>
    <!-- Image Alignments  -->
    <div class="container">
        <img src="image.jpg" class="float-left" alt="Left aligned image">
        <img src="image.jpg" class="float-right" alt="Right aligned image">
        <img src="image.jpg" class="mx-auto d-block" alt="Center aligned image">
    </div>

    <!--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>
</body>

</html>

 

Output:

Output for alignment

Image shapes

Bootstrap provides classes to style images with rounded corners, thumbnails, or circular shapes, such as "rounded" to create rounded images.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 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>Document</title>
</head>

<body>
    <!-- Image Styling  -->
    <div class="container">
        <img src="image.jpg" class="rounded" alt="Rounded image" style="border: 4px solid black">
        <img src="image.jpg" class="rounded-circle" alt="Circular image" style="border: 4px solid black">
        <img src="image.jpg" class="img-thumbnail" alt="Thumbnail image" style="border: 4px solid black">        
    </div>

    <!--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>
</body>

</html>

 

Output:

Output for shapes

Image captions

Bootstrap provides classes to add captions to images, such as "figure-caption" to display a caption below an image.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 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>Document</title>
</head>

<body>
    <!-- Image with caption  -->
    <div class="container">
        <figure>
            <img src="image.jpg" alt="Example image">
            <figcaption class="figure-caption">Write the caption here</figcaption>
        </figure>
                 
    </div>

    <!--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>
</body>

</html>

 

Output:

Output for caption

Overall, Bootstrap's support for images makes it easy to add and style images in web pages with minimal CSS code.

Codes

Using bootstrap, we can display code in two different ways 

  • Inline Code: One way is using the <code> tag. We use this tag to display the code in line with the contents. 
     
  • Code blocks: The second way is using the <pre> tag. We use this tag to display the code as a standalone block element. 

 

NOTE: We must keep in mind that when we are using the <pre> or the <code> tag, we must use the Unicode variants for the opening and closing tags. That is, &lt; and &gt;

Special Cases

There are some special tags for some special cases.

  • Key-presses: When we have to display key-presses, we can use the <kbd> tag.
     
  • Output: When we have to display some sample output, we use the <smap> tag.
     

Let us see an example, to understand all four of them.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 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>Document</title>
</head>

<body>
    <!-- Example for all four, inline code, Codeblock, KeyPress, Sample Output -->
    <p>Use <code>&lt;code&gt;</code> to show code in text.</p>
    <p>To display code as a separate paragraph block use <code>&lt;pre&gt;</code> tag as:</p>

    <pre>
       &lt;div&gt;
          &lt;h1&gt;Heading Exapmle&lt;/h1&gt;
       &lt;/div&gt;
    </pre>

    To get a list of items, type <kbd>ls</kbd> after the <kbd>$</kbd> symbol.<br>
    To find something, press <kbd><kbd>ctrl</kbd> + <kbd>f</kbd></kbd>

    <p><samp>This is a sample output of some code</samp></p>


    <!--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>
</body>

</html>

 

Output: 

Output for codes

Frequently Asked Questions

What is bootstrap?

Bootstrap is a free front-end framework for developing responsive websites and web applications. It is open-source and can be used by developers to build custom websites and applications.

How to add responsive images?

We can add responsive images using the class img-fluid. 

How to add inline codes?

We can add inline codes using a tag named the <code> tag.

How to add blocks of codes?

We can add blocks of codes using a tag named the <pre> tag.

Can we represent key presses in some special way?

Yes, we can represent key presses on the website. We do it using the <kbd> tag.

Conclusion

In this article, we learned how to insert images and codes in Bootstrap. We learned the basics of the topic through some simple examples. We also read about some special classes and tags and their uses. Check out our articles if you think this blog has helped you enhance your knowledge and want to learn more. Visit our website to read more such blogs. 

  1. Bootstrap overview 
  2. Why Use Bootstrap? 
  3. Bootstrap Environment Setup 
  4. Bootstrap CSS Overview 
  5. Bootstrap library  
  6. Bootstrap Accordion

 

For placement preparations, you must look at the problemsinterview experiences, and interview bundles. Enrol in our courses and refer to the mock tests and problems available; look at the Problem Sheets interview experiences, and interview bundle for placement preparations. You can also book an interview session with us.  

Consider our paid courses, however, to give your career a competitive advantage!

Happy Coding!

Live masterclass