Resizing Images Responsively Using Bootstrap

I'm working on specifying image sizes for different screen sizes. I'm wondering if there are any specific Bootstrap classes that only work at certain screen sizes. If so, it would be great because then I could use something like 

<img class = "only-active-on-mobile" src="myimage.jpg">
, right?

Here is the code I have so far:

   <div class="media">
      <a class="pull-left" href="#">
        <img class="media-object img-rounded" style="" src="<%= image_path('MY_IMG_THAT_NEEDS_RESIZING.jpg') %>">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        <!-- Nested media object -->
        <div class="media">
          ...
        </div>
      </div>
csstwitter-bootstrapscaling

Answer №1

If you're looking to control visibility on different device sizes, Bootstrap has a solution with its "utility" classes such as .visible- and .hidden-.

To target specific devices, use the following classes:

xs for Extra small devices (Phones <768px)

sm for Small devices (Tablets ≥ 768px)

md for Medium devices (Desktops ≥992px)

lg for Large devices (Desktops ≥1200px)

You can refer to the documentation for more information.

In your situation, apply the class .visible-xs to the mobile image and .hidden-xs for the replacement image.

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

How to position preloader at the center in materializeCSS

Given this situation: I attempted to implement this Preloader with position:fixed and centered. My approach was as follows: .loader { position:fixed; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); } <link rel="stylesheet" href="h ...

htmlcssmaterialize

Having trouble getting the carousel slider to function properly on meteor?

I am currently working on my portfolio page using Meteor, and I want to include a carousel slider gallery. The problem I'm facing is that while the first gallery works fine, the second one does not load correctly and just displays a list of pictures. ...

cssmeteorcarousel

Switch up the text when the image link is being hovered over

Is there a way to change the text color of the "a" tag when it is not wrapping the img link? <li> <a href="# WHEN I HOVER THIS IMG LINK I WANT A TAG BELOW TO CHANGE COLOR"> <img alt="Franchise 16" src="#"></img> < ...

javascriptjquerycss

Tips for ensuring consistent display of UTF-8 arrow characters across different web browsers

Is there a way to ensure consistent display of UTF-8 arrow characters across all browsers? I have experimented with various font sizes like px and pt, as well as using HTML Entity codes (e.g. &#9664;) but unfortunately the arrows still show difference ...

htmlcssutf-8

The horizontal scrollbar is not displaying

(RESOLVED) Currently, I am developing a movie app that displays film titles through an Accordion feature using Bootstrap. Specifically, I have created an Accordion that showcases movies added to a favorites list. The intention is for this favorites secti ...

htmlcssbootstrap-5

Display icons within each table cell row

Objective: I want to implement a feature where icons appear when the cursor is inside a td row, allowing users to click on them. These icons will contain links. When the cursor moves to a new td row, the previous row should return to its default state a ...

javascriptjqueryhtmlcsstwitter-bootstrap

Styling with CSS: A guide to reducing paragraph margins within a div element

My current project involves using javascript to dynamically insert paragraphs inside a div element. Essentially, the script grabs the value entered into an input form when a button is clicked and adds it as a new paragraph within a specific div. However, I ...

javascripthtmlcssmarginappendchild

When resizing the browser, HTML/CSS elements tend to shift positions :(

I've experimented with different position values like absolute, fixed, and static without success. Wrapping the element in a div didn't yield the desired result, so I'm seeking assistance to correct this. (If that is the solution) The issu ...

htmlcssstylesdisplay

Mysterious area located within a flexbox set to display items in a column arrangement

There is a mysterious gap within a flexbox that has a column direction. In the header-left div, I have set up a flexbox with a column direction. It consists of three nested divs: left_text_heading, hero-img, and hero-text. Strangely, there is an unknown s ...

htmlcssflexbox

automatically closing bootstrap alerts upon form submission

I'm working on an ajax form that sends data to a database and utilizes bootstrap alerts to notify the user when the process is successful. I want these alerts to automatically close after a certain period of time, consistently. Here's the issue: ...

javascriptjqueryajaxtwitter-bootstrap

Is left padding appearing mysteriously (supernatural CSS phenomenon)?

While using the Firebug inspector tool, if you hover over #jimgMenu ul, you may notice that it has left padding without any corresponding CSS rule: Where is this mysterious left padding coming from? Why is the origin not visible? EDIT: If you navigate t ...

jquerycss

The issue with importing fonts in CSS causing an error is encountered when utilizing an exported Angular library

I have a components library for Angular that relies on line-awesome icons. To include the necessary fonts and styles, I am using a CDN in the main SCSS file as shown below: @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400; ...

cssangularsassfonts

What is the method for activating scrolling in an inner div instead of the browser window?

In the code snippet provided, I am encountering an issue where the browser window scrolls instead of the specified div with overflow-y: scroll when minimizing the browser window. How can I ensure that scrolling occurs within the div itself without making ...

css

Adding a .PHP File to Two Separate DIVs

I am using wordpress to create a custom theme. I'm interested in placing all the content from my slider.php file inside a div box on my index.php page. How would I go about doing this? SLIDER.PHP <div class="slider"> // All the image tags wit ...

javascriptphpjqueryhtmlcss

Setting a fixed width for the body element results in alignment problems

I'm struggling with aligning divs properly on my HTML page that has a tab using CSS and jQuery. Whenever I try to set a fixed width for the body or main container, everything goes out of place... How can I ensure that the body has a minimum fixed widt ...

htmlcss

Elevate Your Flipclock.js

I am currently working on a website that utilizes flipclock.js, but I am facing some challenges in enlarging it to occupy more space on the page. Is there anyone who knows how to upscale or increase its size? ...

cssflipclock

Alter the background color of a table cell in Angular HTML depending on a boolean value

Attempting to use Angular ng-class to set the background color of a table cell. I'm referencing code snippets from these resources: Angular: How to change the color of cell table if condition is true Change HTML table cell background color using ...

htmlcssangular

Creating elegant text in HTML using only CSSLearn how to design stylish text using CSS without any additional code

Can you generate stylish text using just CSS in HTML? Check out this link for a great demonstration of fancy text. ...

htmlcss

What causes inline-blocks to malfunction after a non-breaking space is inserted?

Here is some HTML code: <p id='one'>Hello World how are you.&nbsp;<span>Entrepreneur</span></p> <p>Hello World how are you.&nbsp;<span>Entrepreneur</span></p> Below is some CSS styling: ...

css

struggling to adjust image dimensions using bootstrap styling

Currently, I am in the process of creating a Carousel image slider using bootstrap. However, I am facing an issue with changing the height of the images within the carousel. Whenever I try to adjust the height, it ends up affecting both the width and heigh ...

htmlcssbootstrap-4