Modifying the image width in Bootstrap: A step-by-step guide

Question

Modifying the image width in Bootstrap: A step-by-step guide

When the screen is lg or larger, I would like my image to be full width (w-100), and when the screen is md or smaller, I want it to be half width (w-50).

<div>
        <div class="container">
            <div class="row">
                <div class="col-md-10 offset-md-1 order-md-2"><img src='image.png' class="w-100 w-md-50"> 
                </div>                
            </div>
        </div>
</div>

Is there a Bootstrap class that can specify different widths for different screen sizes? I tried using w-md-5 similar to offset-md-1, but it didn't work.

html css bootstrap-4

Answer 1

Answer №1

Bootstrap 4 doesn't seem to offer width utilities based on breakpoints, only as a general setting (w-25, w-50, etc.).

If you need more customized width options, you can define your own styles like this:

@media (min-width:768px) {
    .w-md-50 {
        width: 50% !important;
    }
}

Answer 2

Bootstrap 4 doesn't seem to offer width utilities based on breakpoints, only as a general setting (w-25, w-50, etc.).

If you need more customized width options, you can define your own styles like this:

@media (min-width:768px) {
    .w-md-50 {
        width: 50% !important;
    }
}

Answer 3

Answer №2

https://example.com/docs/layout/grid/

I haven't personally verified it, but you could potentially attempt to reverse the process -

<img src='image.jpg' class="w-50 w-md-100">

Meaning that w-50 would apply from extra small up to medium screens, while w-md-100 would take effect from medium size screens (768px) and larger.

Answer 4

https://example.com/docs/layout/grid/

I haven't personally verified it, but you could potentially attempt to reverse the process -

<img src='image.jpg' class="w-50 w-md-100">

Meaning that w-50 would apply from extra small up to medium screens, while w-md-100 would take effect from medium size screens (768px) and larger.

Modifying the image width in Bootstrap: A step-by-step guide

Answer №1

Answer №2

Similar questions

Prevent the row height from fluctuating following the fadeOut() effect

What is the best way to update a stylesheet dynamically within an Angular project?

Implementing CSS transitions across several elements simultaneously can enhance the user experience

Using javascript, jquery, and html to direct to html pages

Modify the child element to hide overflow-x

Adjusting the line height of an inline-block div causes surrounding inline-block siblings to shift downward

Implementing the disabled style for an ASP.net dropdownlist

jquery code to count the number of children in an html table

Aligning an SVG within a container div

Is there a way to automatically close a created div by clicking anywhere outside of it?

As jQuery animates, the navigation bar gracefully descends

Mastering Ajax: Frustrating issues with loading dynamic content

Don't forget to preserve the hover state of divs even after refreshing

When trying to load a php page2 into page1 via ajax, the Javascript code fails to execute

Challenges with Implementing Background Images on my Website with HTML and CSS

Sorting of tables does not function properly following an ajax request

Use vertical gaps to separate items by applying the following technique:

What is the best way to incorporate an options tabbed menu into a mega drop-down menu?

What is the best way to create a full-width gallery display?

What is the best way to store objects in files using Node.js?