Prevent images from displaying on smaller screens by utilizing Bootstrap's responsive design

Here is a snippet of code that utilizes Bootstrap 4 to display text and images:

<div class="container">
    <div class="row">
        <div class="col-xl-12">
            <img src="~/img/img1.png" style="height:60.3px;width:750px" class="mx-auto d-block" />
            <p class="span12 pagination-centered" style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">.... </p>
            <p class="span12 pagination-centered" style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">....</p>

            <img src="~/img/img2.png" class="mx-auto d-block" />

            <p class="span12 pagination-centered" style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">....</p>
            <p class="span12 pagination-centered" style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">..../p>


        </div>

    </div>

</div>

If you would like to hide the two images on smaller screens and keep only the text visible, you can achieve this using Bootstrap 4. How can this be done? Thank you!

csstwitter-bootstrapbootstrap-4responsive-design

Answer №1

Make sure to update the class of the images as follows:

<img src="~/img/img1.png" style="height:60.3px;width:750px" class="mx-auto d-none d-md-block" />
<img src="~/img/img2.png" class="mx-auto d-none d-md-block" />

If you wish to display the image on smaller devices, consider using d-sm-block. Check out this bootstrap cheat sheet for more information.

Answer №2

Utilize display classes in conjunction with breakpoints for responsive design.

Media queries impact screen widths starting from the specified breakpoint and larger. For instance, using .d-lg-none will set display: none; on screens that are lg or xl size.

This feature hides content on mobile devices, displaying it only on screens wider than 768px (best viewed in full page mode).

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

 <img src="https://picsum.photos/536/354" style="height:250px;width:250px" class="mx-auto d-none d-md-block" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Are there any reliable sources for a complete list of browser CSS properties?

Is there a way to easily access a comprehensive list of CSS properties supported by specific browsers, particularly IE8? Any suggestions on where I can find this information? ...

htmlinternet-explorercssbrowser

Is my class more specific than my ID when using the parent ID and descendant combinator in CSS specificity?

Could it be that my logic is flawed and this CSS rule is actually valid? Let's break it down: My ID is more specific than my class. Furthermore: My ID is more specific than the parent ID. However: Is parent ID, when combined with the descenda ...

csscss-selectorscss-specificity

The CSS3 :empty selector targets elements that have no content inside

Seeking guidance on CSS3 and the :empty pseudo-class. Currently developing a web AJAX application with a sidebar in the layout that I want to hide when empty. Here's what I have: #my_sidebar:empty { display:none;} To display it when not empty, I wr ...

google-chromecsscss-selectors

What is the best way to implement automatic color changing in PHP code?

I have a MySQL table called 'contact number' that contains the field 'c_n'. I need to display data from this field and change the color based on the length of the value. If the field's value is less or more than 11 digits, the colo ...

phphtmlcss

Looking to modify the CSS of an element during a drop event using interact.js?

I've encountered an issue in my code where setAttribute and .transform are not working as expected. I have tried using them within the ondrop event function, but with no success. interact('.dropzone') .dropzone({ // Setting the r ...

javascriptcssinteract.js

Certain CSS classes are functioning properly, while others are not operating as expected

I am in the process of developing an ASP.Net page and utilizing Bootstrap, which has been functioning properly. Additionally, I have integrated a custom stylesheet to refine the appearance of the page. However, within the last couple of days, any new class ...

htmlcssasp.nettwitter-bootstrap

What is the best way to expand the footer specifically for mobile devices?

My website has a footer positioned at the bottom of the page. The HTML and CSS for this footer are as follows: <style> html { position: relative; min-height: 100%; } body { /* Margin bottom by footer height */ ...

htmlcsstwitter-bootstrapfooter

Arrangement using the display property of inline-block not following a linear direction

I'm experiencing some issues with the arrangement of elements on this page: When the viewport width is around 800px, the layout appears misaligned. Some lines have only a few bottles even though there is space for more. Is there a solution to this pr ...

htmlcss

"Incorporate countless Bootstrap 4 carousels into one webpage for an enhanced user

I'm experiencing difficulties with the new Bootstrap 4. Can anyone provide guidance on how to incorporate multiple Bootstrap carousels into a single page? I've researched several websites, but most only offer solutions for Bootstrap 3. Your assi ...

javascripthtmlcssbootstrap-4

Issue with vertical navigation bar

Currently working on creating a vertical navigation bar without any styling. It's challenging to figure out how to align the items properly side by side. You can check out the basic functionality at . When clicking on 'Android', I want the g ...

htmlcss

Can you explain the purpose of the spaces on the buttons?

mysterious button spacing issue <div class="buttons"> <button id="btn-search" type="submit">Search Engine</button> <button id="btn-lucky" type="submit">Feeling Lucky Today</button> </div> .buttons { max-width: 29 ...

htmlcss

When updating the HTML content, JavaScript is outputting the code as text instead of running it

I am encountering an issue with adding the body content of a JSON file, which contains HTML code, to my existing HTML. Instead of executing the code, it appears as text within paragraph or header elements. I have searched through various discussions but ha ...

javascripthtmlcssjson

Implementing the 'bootstrap tour' feature in a Ruby on Rails application

I have integrated bootstrap-tour.min.css and bootstrap-tour.min.js into my project. <script type="text/javascript" src='bootstrap-tour.min.js'></script> <link rel="stylesheet" type="text/css" href="bootstrap-tour.min.css"> Her ...

javascriptcssruby-on-railsrubytwitter-bootstrap

A Beginner's Guide to HTML: Finding the Optimal Viewport Dimensions

When it comes to designing a website, there are various opinions on the best window size or viewport size to cater to. If you want to reach a wide audience, what size should you prioritize? For example, if you are creating a gaming website, should you assu ...

htmlcss

Trouble with the Ngx-Captcha feature

I am currently utilizing https://www.npmjs.com/package/ngx-captcha/v/11.0.0. <ngx-recaptcha2 #captchaElem [siteKey]="'6Leh1ZIjAAAAAG8g0BuncTRT-VMjh3Y7HblZ9XSZ'" (success)="handleSuccess($event)" [useGlobalDomain]="fals ...

javascripthtmlcssangularngxs

Unable to view newly added components

I am currently in the process of setting up a website, focusing on arranging and formatting everything on the page before moving on to styling and adding JavaScript. I recently added three div tags after my form to create three separate columns in the ne ...

csshtml

Struggling to properly align div in the center

I've been struggling to properly center a div inside another div, but instead of being centered it appears shifted to the right. I've experimented with different positioning combinations and techniques from various sources, yet I haven't fou ...

htmlcssbootstrap-4

Modify the size of images while shuffling using Javascript

Hey there! I've got some bootstrap thumbnails set up and I'm using a script to shuffle the images inside the thumbnails or a element within the li. It's working fine, but some of the images are coming out larger or smaller than others. I&apo ...

javascripthtmltwitter-bootstrap

Adding a border-top overlay to vertical navigation

I'm working on a vertical navigation bar and I'd like to make some styling changes. Here's the current setup (View jFiddle): <style> ul{ list-style-type: none; } li{ display: block; margin: 0; padding: 10; border-top: 1px d ...

htmlcss

Utilizing CSS to Implement a Background Image

Here is where I am looking to upload the image. Ideally, I would like to position my image to the left side of the text related to Food and Travel. You can view the image here. .block-title h3 { color: #151515; font-family: 'Montserrat', s ...

htmlcss