To show an image only on small screens in Bootstrap, you can use Bootstrap’s responsive utility classes and CSS media queries. This means you can make the image visible only on mobile devices and hide it on larger screens.
Method: Using Bootstrap’s Responsive Utility Classes Bootstrap gives you special classes that help you show or hide things depending on the size of the screen. You can add these classes directly to your HTML elements to control when they appear or disappear on different devices, without needing to write extra CSS. This way is simple and easy, especially if you’re already using Bootstrap.
Example: The below code will explain the use of Bootstrap responsive utility classes to display images on mobile devices.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Image Only on Mobile View - Bootstrap Utility Classes</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<style>
/* Additional CSS for styling */
.img-fluid {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<!-- This div is visible only on extra small screens (mobile devices) -->
<div class="d-block d-sm-none">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg" class="img-fluid" alt="Mobile Image">
</div>
<h1>Content for All Views</h1>
<p>This content will be displayed on all screen sizes.</p>
</div>
<!-- Bootstrap JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Example 2: The below code also implements the Bootstrap classes to accomplish the task.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile-only Image - Advanced Bootstrap Project</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<style>
/* Additional CSS for styling */
.mobile-image {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<!-- Navigation bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Geeksforgeek</a>
<!-- Navbar toggler -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar items -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Banner Section -->
<section id="banner" class="bg-light py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Welcome to Our Website</h2>
<p class="lead">A Computer Science Portal for Geeks.</p>
</div>
<div class="col-md-6">
<!-- Image displayed only on mobile -->
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg"
class="img-fluid d-block d-md-none mobile-image" alt="Mobile Image">
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-5">
<div class="container">
<h2 class="text-center">About Us</h2>
<p class="lead text-center">GeeksforGeeks is a leading platform that provides computer science resources
and coding challenges for programmers and technology enthusiasts, along with interview and exam
preparations for upcoming aspirants. With a strong emphasis on enhancing coding skills and knowledge, it
has become a trusted destination for over 12 million plus registered users worldwide. The platform offers
a vast collection of tutorials, practice problems, interview tutorials, articles, and courses, covering
various domains of computer science.</p>
</div>
</section>
<!-- Services Section -->
<section id="services" class="bg-light py-5">
<div class="container">
<h2 class="text-center">Our Courses</h2>
<div class="row">
<!-- Sample service cards -->
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">DSA Self-Paced</h5>
<p class="card-text">Master DSA from basic to advanced.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Data Science Course</h5>
<p class="card-text">Data Analysis with Python Machine Learning & AI.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">DSA to Development</h5>
<p class="card-text">Comprehensive DSA Mastery Versatility in Tech Stacks.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-5">
<div class="container">
<h2 class="text-center">Contact Us</h2>
<p class="lead text-center">A-143, 9th Floor, Sovereign Corporate Tower, Sector-136, Noida, Uttar
Pradesh - 201305</p>
</div>
</section>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>