The Bootstrap Grid System Column is Experiencing Issues

Check out my code snippet:

I've attempted changing the container class to container-fluid and resizing the page, but no luck.

<div class="container">
    <div class="row">
        <!--Product: banana split-->
        <div class="col">
            <div class="card" style="width: 20rem;">
                <img class="card-img-top" src="img/banana-split.png" alt="Banana Split Image">
                <div class="card-block">
                    <h4 class="card-title">Banana Split</h4>
                    <p class="card-text">Price: 5$</p>
                    <a href="#" data-name="banana-split" data-price="5" class="add-to-cart btn btn-primary"><i class="fas fa-shopping-cart"></i> Add to Cart</a>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card" style="width: 20rem;">
                <img class="card-img-top" src="img/bengala-doce.png" alt="Bengala Doce Image">
                <div class="card-block">
                    <h4 class="card-title">Doce Natalino</h4>
                    <p class="card-text">Price: 2$</p>
                    <a href="#" data-name="doce-natalino" data price="3" class="add-to-cart btn btn-primary"> <i class="fas fa-shopping-cart"></i> Add to Cart</a>
                </div>
            </div>
        </div>
    </div>
</div>

The issue lies in the second column not aligning side by side. Instead, it's stacking on top of each other. I checked the console for any errors, but found none.

All other elements like bootstrap buttons are functioning properly.

htmlcssbootstrap-5col

Answer №1

Don't forget to customize your column classes based on the screen sizes you are working with. This will ensure that your layout displays properly, with 2 columns on medium screens and a single column on smaller screens using col-md-6 col-sm-12

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04666b6b70777076657444331b1e37392f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <div class="container">
        <div class="row">
            <!--Product: banana split-->
            <div class="col-md-6 col-sm-12">
                <div class="card" style="width: 20rem;">
                    <img class="card-img-top" src="img/banana-split.png" alt="Banana Split Image">
                    <div class="card-block">
                        <h4 class="card-title">Banana Split</h4>
                        <p class="card-text">Price: 5$</p>
                        <a href="#" data-name="banana-split" data-price="5" class="add-to-cart btn btn-primary"><i class="fas fa-shopping-cart"></i> Add to Cart</a>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-sm-12">
                <div class="card" style="width: 20rem;">
                    <img class="card-img-top" src="img/bengala-doce.png" alt="Bengala Doce Image">
                    <div class="card-block">
                        <h4 class="card-title">Doce Natalino</h4>
                        <p class="card-text">Price: 2$</p>
                        <a href="#" data-name="doce-natalino" data price="3" class="add-to-cart btn btn-primary"> <i class="fas fa-shopping-cart"></i> Add to Cart</a>
                    </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

In Redux, it is possible to add characters to an array but for some reason the remove action does not successfully reach the reducer

As a user types or erases characters, I am utilizing redux to update an array of characters. This allows me to set a success flag when the user correctly types the entire phrase. Currently, when typing in characters, the SET_INPUT action in redux fires of ...

javascripthtmlreactjsredux

issues with auto-fill functionality in Firefox and Internet Explorer

I am looking to have my username and password automatically filled in when a user is already logged into the website. I have enabled autofill using the code below. Ideally, when a user visits the site again, both the username and password fields should be ...

javahtmlinternet-explorerfirefoxautofill

What could be causing this image to disregard the designated width value?

https://i.stack.imgur.com/bPH4t.png While working on my project with Next.js, I encountered an issue with the IconText component provided by Next.js. Even though I specified a width value for the image, it seems to be ignoring it. Below is the structure o ...

cssnext.js

Adding a simulated bottom border to a rotated container

Currently, I am utilizing the CSS3 rotate value to create an arrowhead effect for modal boxes. However, I now require a full arrowhead design with a bottom border. As this involves rotating a div at a 45° angle, adding another border to either side will n ...

htmlcsscss-shapes

Ways to access the HTML content of a component in vue.js

I have a unique html template displayed below CustomTemplate.vue <template> <div class="content custom-page"> <md-card class="page-display"> <md-card-header class="page-header"> <md-card- ...

javascripthtmlprintingvue.js

Utilize React JS to incorporate multiple instances of the Bootstrap carousel within a webpage using Reactstrap

I am having difficulty using the bootstrap carousel multiple times on a single page. I have attempted to copy it as a new item numerous times, but I keep encountering errors. <CarouselItem onExiting={() => setAnimating(true)} onExited={() => ...

htmlnode.jsreactjsbootstrap-4reactstrap

jQuery fails to retain multiple classes when appending elements

Strange things are happening when I use jQuery. I create a string like this: myBlock = """<div class="alert alert-success">...</div>""" But when I try to append it using jQuery, $("#msg_container").append(myBlock) The resulting div in the ...

jquerycssdom

What Causes mat-bottom-sheet-container to Overflow Instead of Remaining Anchored at the Bottom of the Mobile Screen?

I am encountering an issue with a popup window in my Angular app. Despite testing it on various screen resolutions using Chrome's DevTools Screencast, the popup appears correctly styled and positioned on mobile devices. However, when tested on a real ...

androidcssangularangular-material

Ways to eliminate a textbox from an HTML table using jQuery or JavaScript while retaining the textbox values

Currently, I am facing a task where I have a table with a column filled with textboxes. My goal is to eliminate the textboxes using jQuery/JavaScript while retaining the values within them. Here are a couple of methods I have attempted: // removes both t ...

javascriptjqueryhtml

What is the correct process for submitting an HTML form following the loading of asynchronous data?

I've been searching high and low, but I can't seem to find the solution to my problem. I've scoured search engines and Stack Overflow with no luck. My dilemma is this: How can I trigger the submission of an HTML form only after asynchronous ...

javascripthtmlformsasynchronous

Client Blocking Issue: ExpressJS encountering problem loading JavaScript file

I recently deployed my express app on a server (specifically, I used Heroku). Everything functions perfectly when I test the app locally. However, when I access the app online, I encounter an issue with a net::ERR_BLOCKED_BY_CLIENT error. This error states ...

javascripthtmlexpressheroku

Showcasing pictures with a prominent large image accompanied by two smaller ones on the right side

In my use of Material-ui-next, I am attempting to create images in a specific layout. ------ --------- | | | | 2 | | | | 1 |---| | | | | 3 | ------ --------- I have encountered some unusual issues. 1 - 3 appears below 1 ...

javascriptcssflexboxmaterial-ui

Guide to importing scoped styles into a <NextJS> component

When importing a CSS file, I usually do it like this: import './Login.module.css'; In my component located at components/login/index.js, I define elements with classes such as <div className="authentication-wrapper authentication-basic ...

javascriptcssnext.js

Ways to prevent a div containing a lengthy content string from extending beyond other divs

Check out my Codepen project here Here is the HTML code for my personal website: <div id="splash" class="divider"> <h1 class="text-center text-uppercase">vincent/rodomista</h1> <p class="text-center text uppercase">Full Stack ...

htmlcsstwitter-bootstrap

The iframe came to a halt as soon as it was no

I am currently developing a live video website that utilizes third-party tools to play the videos. To simplify things, I have embedded all the components required for live video into a single HTML page. Here is how it looks: <iframe data-v-140cfad2= ...

javascripthtmldomiframevue.js

What is the best way for me to incorporate images retrieved from an API call into my

Hey everyone, this is my first time posting on here so if there's anything I'm missing, please let me know! I've run into an issue with the images on my categories page not aligning properly and being different sizes after I incorporated som ...

javascripthtmlcss

Troubleshooting an issue with IE regarding box-shadow CSS functionality

I have a problem with my website design where the box-shadow effect on the top menu is not displaying properly in Internet Explorer. I tried adding specific code for IE8 and lower versions to fix this issue: zoom:1; /* This enables hasLayout, which is nec ...

internet-explorercss

How can I align bullets in an unordered list with the left margin of the heading above?

Is there a way to line up the bullets with the left margin of the text above the list? Here's an example: <html> <style> ul.p1 {padding-left: 40px} ul.p2 {padding-left: 0px} </style> <body> <h2&g ...

htmlcss

Is there a way to execute an onclick function prior to the Bootstrap 5 'hidden' event being triggered?

Our modal popup contains a button with an onclick event. In the previous version of Bootstrap, the onclick event would fire first when the modal was hidden, followed by the hidden.bs.modal event. However, in version 5.2, the hidden.bs.modal event now fire ...

bootstrap-5

Why does selecting by data- attribute in jQuery fail for certain elements?

Consider this sample HTML code: <div id="details" data-type="motion"> <p>Lorem ipsum</p> </div> <img src="http://placehold.it/50x50" data-type="motion" /> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr ...

jqueryhtmljquery-selectors