Bootstrap-4 grid system is effectively maintaining its responsiveness without collapsing

I'm struggling to display one image per row on smaller screens using the sm breakpoint.

This is my first attempt at using bootstrap 4. I followed their grid system guidelines which stated that responsive breaks occur when specifying a size for each col- class. However, I am not seeing any changes in the layout.

From a large screen:

https://i.sstatic.net/DmZjN.png

To a smaller screen:

https://i.sstatic.net/n9O2K.png

HTML

<div class="container-fluid text-right">
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <div class="card mb-3">
                <div class="card-img"
                     style="background-image:url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg);">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-between">
                    <h4 class="card-title">das das</h4>
                    <p class="card-text">lorem oirrwerwer asdf asfd</p>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-6">
            <div class="card mb-3">
                <div class="card-img"
                     style="background-image:url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg);">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-between">
                    <h4 class="card-title">das das</h4>
                    <p class="card-text">lorem oirrwerwer asdf asfd</p>
		</div>
            </div>
        </div>
    </div>
</div>

CSS

.card {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: black; /* fallback color */
  background-position: center;
  background-size: cover;
  transition:all 0.3s ease-in-out;
  opacity:1;
}
.card:hover .card-img,
.card:focus .card-img {
  transform: scale(1.2);
  opacity:0.5;
}

.card:hover .card-img-overlay{
  color:#730d0d;
}

.card-img-overlay>h4, .card-img-overlay>p{
  visibility:hidden;
}

.card-img-overlay:hover h4, .card-img-overlay:hover p{
  visibility: visible;
}

.card:hover .card-img-overlay p{

}
htmlcssbootstrap-4

Answer №1

The problem stems from the absence of 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

within the head section.

Answer №2

UPDATE:

Kudos to Michał Drabik for pointing out the issue in their response. It turns out that when I inserted your code into a new Bootstrap project, the viewport meta tag was already included, so I completely overlooked it.

REPHRASED:

You might want to test it in a browser to double-check. I copied and pasted your code as is into a fresh Bootstrap setup in Dreamweaver, and it worked perfectly in both live view and across different browsers. As far as I can tell, there doesn't seem to be any issues with the code itself.

The only other explanation could be that your Bootstrap framework has been corrupted (are you working within the bootstrap framework?) Without access to the associated .css and .js files, it's difficult to provide more assistance. You could try creating a new Bootstrap project from scratch and inserting the code above to see if the problem persists. If it works fine in the new project, chances are something went wrong with the original framework setup.

Answer №3

Make sure to use col-12 instead of col-xs/sm-12.

col-xs/sm-12 is not a valid class in Bootstrap 4. - EDIT... I stand corrected, it does exist.

.card {
  width: 100%;
  height: 300px;
  overflow: hidden;

}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: black; /* fallback color */
  background-position: center;
  background-size: cover;
  transition:all 0.3s ease-in-out;
  opacity:1;
}
.card:hover .card-img,
.card:focus .card-img {
  transform: scale(1.2);
  opacity:0.5;
}

.card:hover .card-img-overlay{
  color:#730d0d;
}

.card-img-overlay>h4, .card-img-overlay>p{
  visibility:hidden;
}

.card-img-overlay:hover h4, .card-img-overlay:hover p{
  visibility: visible;
}

.card:hover .card-img-overlay p{

}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />

<div class="container-fluid text-right">
    <div class="row">
        <div class="col-12 col-md-6">
            <div class="card mb-3">
                <div class="card-img"
                     style="background-image:url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg);">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-between">
                    <h4 class="card-title">das das</h4>
                    <p class="card-text">lorem oirrwerwer asdf asfd</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card mb-3">
                <div class="card-img"
                     style="background-image:url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg);">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-between">
                    <h4 class="card-title">das das</h4>
                    <p class="card-text">lorem oirrwerwer asdf asfd</p>
                </div>
            </div>
        </div>
    </div>
</div>

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

What could be causing the HelloWorld program in AngularJS to malfunction?

To access the codes, you can visit http://jsfiddle.net/hh1mye5b/1/ Alternatively, you can refer to: <!doctype html> <html ng-app="dcApp"> <head> </head> <body> <div> <div ng-controller="SpeciesController"> ...

javascripthtmlangularjs

What is the best way to display schema dependencies in a React JSON form within a single row?

I am currently utilizing React JSON Schema Form to construct a form that is rendered through a schema. My goal is to establish a schema dependency where the selection of a drop-down triggers the generation of different types of form fields. The JSON schem ...

reactjsbootstrap-4react-formsreact-jsonschema-forms

Is Consistency Possible with CSS Transition Direction?

Take a look at this example: https://codepen.io/jon424/pen/XWzGNLe In the provided code snippet, there is a button that can toggle the visibility of an image. When clicked, the image disappears from bottom to top and reappears when clicked again. The use ...

javascriptcsscss-transitions

Navigation bar with dropdown functionality that adjusts its width based on the content inside

Need help with a CSS dropdown menu issue on my WordPress site. The contents of the submenus are too wide, even after setting a static width for them. I'm looking for a way to make the submenu width adjust dynamically based on the title length. Any exp ...

cssnavigation

eliminate white pixels from the ImageData on the canvas

I've come across a challenge with my HTML images - they have a white background that I need to remove. My initial thought is to make all white pixels transparent, however, I'm unsure of how to do this using only HTML and JavaScript. Any advice wo ...

javascripthtmlcanvas

The essential criteria for script tag and page validation requirements

There are instances where I have pages that contain only a script without any content (such as sending data through postMessage and then closing itself). In these cases, is the page considered valid with just <script>doSomeStuff</script> or do ...

javascripthtmltagsw3c-validation

Issues with Clicking a Button in Internet Explorer 9 Frame Using Selenium WebDriver

Having some trouble working with a button inside a frame. I managed to switch the control to the frame using driver.switchTo().frame(3) and successfully clicked on the Add New Client button in Mozilla Firefox 35.0. However, the same code doesn't seem ...

htmlseleniumselenium-webdriverinternet-explorer-9

Access in-depth data by clicking on a map to get detailed information

Recently, I took on the challenge of managing a golf club website after the original creator had to step away. One urgent issue I need to address is fixing a malfunctioning flash animation that provides information about each hole on the course. My plan is ...

javascriptcsshtmldhtml

Mastering the 'wing' corner effect using only CSS

Is there a way to achieve the corner effect shown in this image (top corners)? I'm not familiar with the name of this effect. If it is possible, how would you go about implementing it? Update: Some have suggested that this question is a duplicate. Ho ...

csscss-shapesrounded-corners

Contrasting the distinctions between a pair of CSS class declarations

After using my customized CSS class named myclass alongside Bootstrap's built-in class container, I have a question about how to declare a div element with both classes. Should I go with: <div class="myclass container">some code</div> o ...

htmlcssbootstrap-4twitter-bootstrap-4

Animation in CSS/transform drifting out of view

I have a challenge with animating text to each corner of the screen, where the text is rotated in every corner. However, I am facing an issue where the text goes off-screen in the top right and bottom left corners. It seems like the rotation might be causi ...

htmlcsscss-animationscss-transforms

Ways to split a div container into two columns, including a left side and a right side

I need to split the div into two columns where on the left side data should float: right; on the right side data should float: left; Sample Html code <div class="text-center"> <p class="Project_Analytics_Heading"> ...

cssangularhtml

Unexpected behavior with async pipe - variable becomes undefined upon reassignment

In my development process, I have implemented 2 components. One is responsible for fetching data from an external service, while the other one displays this data. The constructor of the first component is structured as follows: constructor( private dev ...

javascripthtmlangular

Resizing columns in HTML table remains effective even after the page is refreshed

I've created HTML pages with tables that have multiple columns, but I'm experiencing an issue. The columns are not resizable until I refresh the page. Could someone assist me in fixing this problem and explaining why it's happening? ...

javascriptjqueryhtml

Issues with the Bootstrap date time picker functionality

Even though I have added all the necessary libraries for the date time picker, it still isn't working properly. You can check out this fiddle to see the code. <div class='input-group date' id='from_time'> <input type ...

jqueryhtmltwitter-bootstrap-3datepicker

What is the best way to calculate the total duration (hh:mm) of all TR elements using jQuery?

I currently have 3 input fields. The first input field contains the start time, the second input field contains the end time, and the third input field contains the duration between the start and end times in HH:mm format. My goal is to sum up all the dur ...

javascripthtml

Retrieve the Title from Tiles Option

Our automation team has requested that we hide the page names in a field on our page to assist them in verifying proper navigation. We rely on Apache tiles to build our pages using a layout of header, body, and footer, with most content residing in the bo ...

htmlapacheautomationtilesjspx

How to Make Page Slide in Either Direction Based on User Click Location

Although the title of my question may not be very descriptive, I am essentially trying to implement a functionality where a page will slide right if a user clicks a link to the right of their current active link, and slide left if they click a link to the ...

javascriptjqueryhtmlcssajax

Capture an image from the webcam without any manual intervention and store it in the system's directories

Looking to automate the process of capturing a picture from a webcam once access is granted, and then saving it without any user intervention. I've managed to capture the image but struggling with: A) Automating the capture process B) Saving the ca ...

javascripthtmlimagevideo-capturecapture

Ensure the central alignment of the focused item within the horizontal scroll

I have successfully implemented a horizontal scroll container using <HTML/> and CSS: body { background-color: #212121; } .scroll_container { height: 100px; width: 400px; display: flex; align-items: center; overflow-y: hidden; width: 1 ...

javascripthtmlcssuiscrollviewuislider