Bootstrap Images and Code

Abhay Trivedi
Last Updated: May 13, 2022

Source: Bootstrap 5

Introduction

We sometimes need to add images and codes to our website in text, which could sometimes be a hassle. Don’t worry. Bootstrap got you covered. 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 or variable or expression.

Starter Files

Include the following link in the <head> element to use Bootstrap.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

 

Along with this, to add functionality to your website, you should have to include the following script tags before the </body> as well.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> 

Images

Bootstrap provides these few classes that can apply a simple style to the images. Here are some examples.

Responsiveness

You can make Images in Bootstrap responsive by adding  .img-fluid class to the <img> tag. The image will stretch to the full dimensions of its parent container.

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

 

Image Styling

You can add the following classes to modify the images.

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

 

Output:-

Code

In Bootstrap, use these tags when dealing with code.

  • <code> - Use in when you have to insert inline code.
  • <pre> - Use it when inserting a paragraph or block code.
  • <kbd> - Use it when you have to show key presses.
  • <smap> - Use it when you have to show 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 &lt;pre&gt; 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>

  <samp>This is an output of some code.</samp>

 

Output:-

Frequently Asked Questions

Q.1 What is Bootstrap?

Bootstrap is a free & open-source CSS framework that aims to be a mobile-first front-end web development framework. It contains CSS & JavaScript-based interface components design templates like forms, buttons, navbar, and many more.

Q.2 What is the benefit of using bootstrap image and code?

It makes it easier for the developer to insert websites’ images and codes. They can easily include the predefined classes and focus on other things instead.

Key Takeaways

In this article, we learn how to use Bootstrap images and codes in our projects and make our websites faster by the magic of templating and open source.

Also, check out our web development course and CSS course.

If you are preparing for your DSA interviews then, Codestudio is a one-stop destination. This platform will help you acquire effective coding techniques and overview student interview experience in various product-based companies.

Was this article helpful ?
1 upvote

Comments

No comments yet

Be the first to share what you think