Do you think IIT Guwahati certified course can help you in your career?
No
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.
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.
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>.
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:
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, < and >.
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><code></code> to show code in text.</p>
<p>To display code as a separate paragraph block use <code><pre></code> tag as:</p>
<pre>
<div>
<h1>Heading Exapmle</h1>
</div>
</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:
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.