Is there a way to freeze a row in Bootstrap 4?

I recently put together a slider featuring four images, but I've encountered an issue. When the pixel size drops below 768px, the image quality diminishes and they start stacking on top of each other. Is there a way to keep the images in a single row even when the screen size is less than 768px?

Thank you for any help or advice!

    <div class="container">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" role="listbox">
                <!-- slider 1 -->
                        <div class="carousel-item active">
                            <div class="row">
                                <div class="col-md-3 col-sm-3 col-xs-3">
                                        <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
                                    </div>
                                <div class="col-md-3 col-sm-3 col-xs-3">
                                        <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
                                    </div>
                                <div class="col-md-3 col-sm-3 col-xs-3">
                                        <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
                                    </div>
                                <div class="col-md-3 col-sm-3 col-xs-3">
                                        <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
                                    </div>
                            </div>
                        </div>
<!-- slider 2 -->
                        <div class="carousel-item">
                                <div class="row">
                                    <div class="col-md-3 col-sm-3 col-xs-3">
                                            <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
                                    </div>
                                    <div class="col-md-3 col-sm-3 col-xs-3">
                                            <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
                                    </div>
                                    <div class="col-md-3 col-sm-3 col-xs-3">
                                            <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
                                    </div>
                                    <div class="col-md-3 col-sm-3 col-xs-3">
                                            <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>

                                    </div>
                                </div>
                            </div>

                </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

css:

.carousel-item span img {
     height:200px !important;

}

Answer №1

In Bootstrap 4, a new col- tag has been introduced.

Instead of using col-xs-3, you can now simply use col-3 for your divs.
(Keep in mind that using col- will automatically set sm, xs, and lg to the same widths unless specified otherwise)

Check out the jsfiddle example here: https://jsfiddle.net/as6md81b/16/

For more information, visit https://getbootstrap.com/docs/4.0/layout/grid/

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

Having EventListeners set up across a single CSS class returns null when applied to different types of elements simultaneously

I want to create floating labels that resize dynamically when an input is clicked, similar to modern forms. I am using vanilla JS exclusively for this task. Currently, the setup works with the <input> tag. However, it does not work with the <text ...

Ways to assign a default background shade to a webpage with a transparent background

My page has a completely transparent background achieved by using: body { background:none transparent!important; } When I display this page in a transparent iframe on another site, I can see the website's background through the page. However, if ...

"Adapting Bootstrap dropdown menu to display in the top left corner

While working on a navbar featuring three nav-items with a dropdown-menu class each, I encountered an issue. The first nav-item's dropdown-menu displays correctly, but for the other two, the dropdown-menu seems to shift to the top left. You can view ...

Content within block is failing to display

I am facing an issue where I want to retrieve all posts from my Post model and display them on one view template called allposts.html. Additionally, I need to retrieve and display all posts from the politics category on another view template named politica ...

Can anyone suggest a method to customize the appearance of select options in Vue.js?

https://i.sstatic.net/qNov8.png Is there a way to customize the color and font of select options? I'm referencing this link for an example: . I attempted CSS modifications but they don't seem to be taking effect. ...

Is there a way to adjust the placement of text in an HTML document?

Just starting out with web development and created some HTML code: <html> <body> {errors} <p>Input your numbers:</p> <form method="post" action="."> <p><inpu ...

What is the methodology behind stackoverflow's implementation of comments functionality?

I am looking to implement a feature comparable to the comment system on Stack Overflow for this website. The idea is to enable users to type in a text, click submit, and instantly see it displayed on the page without having to navigate away. It has to be ...

What is the best way to create a clickable image with a box-shadow when a z-index of -1 is applied?

Is there a way to make an image clickable while still retaining the box shadow effect created using CSS3? Currently, I have set the z-index of -1 for the img tag to apply the box shadow. However, this makes the image not clickable when an href tag is added ...

Is your bootstrap tooltip appearing in a different location than your mouse cursor on mouse move?

When hovering over multiple images, I want the tooltip to follow the mouse according to this solution. However, sometimes the tooltip appears very far away from the mouse and flickers. Does anyone know why? Additionally, the CSS code provided below doesn& ...

What is the best way to show the current value of a checkbox element in the future?

I want to add multiple checkboxes using this method: $(".btn-sample").on("click", function() { $(".container").append( '<input class="check-sample" type="checkbox" value="'+check_value+'"/>' ); }); The issue I' ...

Create a bespoke AngularJS directive for a customized Twitter Bootstrap modal

I am attempting to create a unique custom Twitter Bootstrap modal popup by utilizing AngularJS directives. However, I'm encountering an issue in determining how to control the popup from any controller. <!-- Uniquely modified Modal content --> ...

Trouble with Bootstrap v4 toggle drop-down menu functionality detected in local environment, yet functions correctly when live on the

Today, I've encountered an issue with my Bootstrap v4 collapsible hamburger menu on my local XAMPP server. Interestingly, the menu works perfectly fine on my public website when the display is 768px wide in Chrome and Firefox. I have searched through ...

How to Retrieve the Url of a Clicked Element using CSS Property

Is it possible to retrieve the URL when a link is clicked using CSS alone, without relying on JavaScript or jQuery? ...

The initial value set for the innerHTML property of a div element

I have a requirement in my application where I need to confirm if the container div is empty before adding specific text elements to it. The innerHTML of this div is frequently created and removed within the app, so it's crucial to validate its emptin ...

What methods are available to test my website across different browsers such as outdated versions of Internet Explorer like IE8?

Currently, I am working on Chrome with Windows 7 OS installed. However, Windows 7 does not support Internet Explorer 8. This is causing issues when trying to view my web pages in the IE8 version and older. How can I resolve this problem? I have attempted ...

Button styles that have been verified will not be shown in Firefox

Hello, first time poster here! Client specifications for CSS: button { border: 1px solid #B8B7B8; border-radius: 8px; height: 4em; margin: 25px 2px 25px 0; text-align: center; text-decoration: none; width: 4em; } button:active, button:che ...

Reserved space for both double and single quotation marks

I've created a function that generates a table of specified size with predetermined content in each cell, and displays it within a designated div ID. generate_table(4, 4, 'Cell Content', 'display') To test this function, I added a ...

issues with the styling and scripts within the jsp document

During my project work, I encountered an issue with the front end as shown in the image below. https://i.sstatic.net/gLIUr.png Upon loading the project, all styles and scripts disappear completely. How can I resolve this issue promptly? I attempted to up ...

What is the best way to share CSS styles between React and React Native?

Is it recommended to use inline CSS styles in a React / Next.js app to maintain code consistency across projects? For example, like this: import {StyleSheet, Dimensions} from 'react-native'; const vw = Dimensions.get('window').width / ...

Manipulate DIVs by sliding them and resizing their contents with JQuery

Can someone help me with sliding the top div up and down, and the left div left and right? I wrote some code for this but seem to be facing some issues. When I slide the left div, the center content falls down momentarily. Additionally, the code doesn&apos ...