Bootstrap small screen resizing without breaking

Here is my HTML code with Bootstrap CSS included in the head section:

According to Bootstrap, each col div should take up 12 columns on small screens, which essentially fills the entire screen. Additionally, it should hide the img with the .d-sm-none .d-md-block classes, but when I resize in Chrome tools, it's not working as expected. I tried searching Google for a solution, but so far no luck. I even attempted removing the flex class, but that didn't change anything.

<body cz-shortcut-listen="true">

    <div class="container-fluid">
        <div class="row d-flex flex-wrap">



    <div class="col-sm-12 col-md-6 col-lg-3 ">

      <div class="card" style="width: 18rem;">
      <img class="card-img-top d-sm-none d-md-block" src="img/1.jpg" alt="Tower">
      <div class="card-body">
        <h5 class="card-title">Tower</h5>
        <p class="card-text">City: dubay Zip-Code 4993
        <br>
        </p><p>Created: 1.2.2015, 05:40:00
        </p>
            </div>
            </div>
    </div>



    <div class="col-sm-12 col-md-6 col-lg-3 ">

      <div class="card" style="width: 18rem;">
      <img class="card-img-top d-sm-none d-md-block" src="img/1.jpg" alt="Palme">
      <div class="card-body">
        <h5 class="card-title">Palme</h5>
        <p class="card-text">City: Dubai Zip-Code 333
        <br>
        </p><p>Created: 1.2.2011, 05:40:00
        </p>
            </div>
            </div>
    </div>


      <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/2.jpg" alt="Mcdonald">
      <div class="card-body">
        <h5 class="card-title">Mcdonald fastfood</h5>
        <p class="card-text">City: melbourn Zip-Code 4544
        <br>
        </p><p>
        <label>Phone, Web</label>
        <br>
        +66 4895643312 
        <br>
        www.getfat.com
        </p><p>Created: 2.3.2020, 04:30:00
         </p>
            </div></div>
    </div>

      <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/2.jpg" alt="Burgerkin">
      <div class="card-body">
        <h5 class="card-title">Burgerkin fastfood</h5>
        <p class="card-text">City: Switzerlan Zip-Code 4334
        <br>
        </p><p>
        <label>Phone, Web</label>
        <br>
        +66 443543512 
        <br>
        www.getfatter.com
        </p><p>Created: 2.3.2011, 04:30:00
         </p>
            </div></div>
    </div>

      <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/3.jpg" alt="Eating Burger">
      <div class="card-body">
        <h5 class="card-title">Eating Burger</h5>
        <p class="card-text">City: burgertown Zip-Code 4234
        <br>
        <label> Event Infos </label>
        </p><ul>
        <li>14. June. 2100</li>
        <li>3 o clock</li>
        <li>56</li>
        <li>www.event.com</li>
        </ul>
        <p>Created: 1.2.2019, 03:25:00
        </p>
            </div></div>
    </div>

      <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/3.jpg" alt="Sky diving">
      <div class="card-body">
        <h5 class="card-title">Sky diving</h5>
        <p class="card-text">City: skytown Zip-Code 4666
        <br>
        <label> Event Infos </label>
        </p><ul>
        <li>14. June. 2000</li>
        <li>5 o clock</li>
        <li>560</li>
        <li>www.eve222nt.com</li>
        </ul>
        <p>Created: 1.2.2011, 03:25:00
        </p>
            </div></div>
    </div>
      </div>
    </div>



    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 

Answer №1

The d-sm-none function is working as expected. Placing it on the img tag means that, according to Bootstrap's documentation, the sm breakpoint only hides the image from 576px to 768px, which applies specifically to landscape phones. If you want to target regular vertical orientation on a phone, you should replace d-sm-none d-md-block with .d-none .d-sm-block like this:

<div class="row">  
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
        <div class="card">
            <img class="card-img-top d-none d-sm-block" src="img/1.jpg" alt="Palme">
            <div class="card-body">
                <h5 class="card-title">Palme</h5>
                <p class="card-text">
                    City: Dubai Zip-Code 333
                    <br>
                </p>
                <p>HIDE ME</p>
                <p>
                    Created: 1.2.2011, 05:40:00
                </p>
            </div>
        </div>
    </div>
</div>

You can observe this behavior in dev tools when set to 576px, where the image is visible with the PALME section displaying "HIDE ME" (added for clarity). In contrast, at 575px, the image disappears as intended: https://i.sstatic.net/idsfM.png

About your column div issue, while I'm unclear about your question, I do see an error in your code structure. In Bootstrap, you need a container class followed by a row inside it (each row consists of 12 columns). Once a row is filled, you must create another row for additional content, each capable of holding up to 12 columns. I assume you aimed to have the cards span the screen width from small screens until they occupy half the width at the col-md-6 breakpoint at 768px. Below is a demo illustrating this concept:

Demo: https://jsfiddle.net/atcvmqLx/

Explanation: You'll notice that the card containers expand full-width until reaching the col-md-6 breakpoint @ 768px, even though the images are not included.

Feel free to ask if you have any questions!

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

Oops! We're sorry, but it seems like we're having trouble locating the column you're looking for. The column 'updated_at' is not recognized in the field list

According to the error message, it seems that there is a missing column called updated_at, which I am certain I did not create and do not intend to include. The database table in question only contains the following columns: requester, user_requested, id, ...

Organize your list with a single click using jQuery plunge

I am trying to organize a group of list items based on a specific date. Below is the code I have written for this task: Please review the code snippet provided below. $(document).on('change','#exampleSelect',function(){ var filt ...

Using Jquery Ajax for on-focusout and on-submit actions can be tricky, requiring two clicks for the desired outcome

Greetings, I am currently working on a jQuery and Ajax validation form. In this form, if you enter incorrect values like [email protected] for email and 1111111 for password, it will trigger an Ajax validation notice as expected. However, the issue a ...

Below are the steps to handle incorrect input after receiving only one letter:

H-I This is my input .centered-name { width: 80%; margin: auto; } .group { width: 100%; overflow: hidden; position: relative; } .label { position: absolute; top: 40px; color: #666666; font: 400 26px Roboto; cursor: text; transit ...

The user uploads an image to the server, which is then assigned as the background-image for a div element

I am in search of a straightforward method to allow users to upload an image to my server and then use that uploaded image as the background-image for a div element. I need the image to be actually uploaded to the server rather than just displaying a local ...

Tips for creating a hyperlink to a particular tab

Please click here for the demo I am attempting to generate links like this page1.html#section1, page2.html#section2, but these links are not functioning correctly. Relevant code snippet function showSection( sectionID ) { $('div.section'). ...

Highlighting table column when input is selected

I am working with a table where each <td> contains an <input>. My goal is to apply the class .highlighted to all the column <td>s when an <input> is being focused on. Additionally, I want to remove this class from all other columns ...

The Empty Spaces Surrounding the Navigation Bar in HTML/CSS

I am just starting out with CSS and HTML. Is there a way to eliminate the gaps around my navigation bar? Here is an example image showing the gaps around the navbar. I have attempted using width and height attributes but it did not resolve the issue. ...

Using CSS to position elements absolutely while also adjusting the width of the div

In one section of my website, I have a specific div structure. This structure consists of two divs stacked on top of each other. The first div is divided into two parts: one part with a width of 63% and another part with a button. Beneath the first div, t ...

The issue of unicode font compatibility within jQuery autocomplete solutions

I am currently utilizing the Jquery Autocomplete plugin to retrieve data from a database. It functions correctly when I gather data in English, but when attempting to collect data in Bengali, it appears as ??????? As I am new to this, I am unsure how to r ...

Make sure to deselect all other radio buttons when selecting one, running into difficulties

Having an issue with my UI when selecting radio buttons by clicking on a div: A loop that displays different radio buttons: {% for product in collections.regalos.products %} <li class="grid__item large--one-third gift-card"> <div class="gift-s ...

What is the best way to add an image to a SVG placeholder?

This is all unfamiliar territory for me. I am experimenting with the Bootstrap template named "Carousel" as my starting point, utilizing Bootstrap 5.3.2. Here is the link to the Carousel example Everything seems fine so far. However, I am struggling to l ...

The display: flex property is not being properly implemented in Tailwind CSS for the sm:flex

I have a div with the following styles <div class="hidden sm:visible sm:flex"> .... </div> The sm:visible style is applied like this @media (min-width: 640px) .sm\:visible { visibility: visible; } However, the property disp ...

What is the reason that tables support word-break but not word wrap?

Take a look at this example: .table { width: 50px; display: table; padding: 10px; border: 1px solid red; } .table a { word-wrap: break-word; } .table2 a { word-break: break-all; } <div class="table"> <a href="#">doN ...

iOS users experiencing issues with displaced iframes when dragging

I am currently facing an issue with the iframe on my website. Whenever the Make an Appointment button is clicked, the iframe displays a contact form with multiple input fields. Although everything seems to be functioning properly, I have noticed that on i ...

Issue with Bootstrap 4 activate.bs.scrollspy event not triggering

Currently utilizing Bootstrap v4.0.0 for my project. All essential JavaScript files (jQuery, popper, and Bootstrap) have been properly included, along with the necessary CSS files. Here is a snippet of the HTML code: <body data-spy="scroll" data-targ ...

How can I use a variable from an external JavaScript file in Jade?

Hello, I am new to using Jade. I understand that in Jade, you can create JavaScript variables and easily integrate them with HTML like this: - var myname = "john" p my name is #{myname} But what if the variable needs to come from an external .js file (o ...

Updating the text box's font color to its original black shade

I have a form that includes dynamic text boxes fetching data from the backend. When a user clicks on a text box, the color of the text changes. Upon form submission, a confirmation message is displayed and I want the text box color to revert back to black. ...

Using Bootstrap 4 CSS file within an Angular 5 CLI project

Transition: Moving from using AngularJS 1.x to the latest version, Angular 5, has brought up some questions that need answers. After importing bootstrap from npm modules in either the style.css file or the styles array inside the angular-cli.json file, I ...

Require assistance in adjusting a personalized dropdown menu and updating the selected value

I have created a unique custom dropdown feature as shown below: view image description here Upon selecting an option from the list, the main value will update and a label will float above it. view image description here $(".custom-dropdown-main").clic ...