Bootstrap failing to enclose columns that do not have a specified size

As I dive into creating a Bootstrap grid website to expand my knowledge, I am following the guidelines provided here. Trying to replicate the examples from that page has led me to the first hurdle.

The issue arises when dealing with columns without specified sizes. The expected behavior is for them all to evenly fill up a row. However, my result looks different than anticipated:

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

I made minimal adjustments to the HTML/CSS structure by adding colors and some padding. Here is the additional CSS code I implemented:

.row{
    /*background-color: lightblue;*/
    border: 3px solid rgba(86,61,124,.2);
}
.row>.col{
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

All necessary Bootstrap CSS, js, and jQuery resources are sourced from the recommended w3schools CDN.

I'm puzzled as to why my columns won't stack uniformly like in the example. Any assistance would be greatly appreciated.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

The code is functioning as intended without any modifications - you can find the Bootstrap-v4 code snippet below:

.row {
    /*background-color: lightblue;*/
    border: 3px solid rgba(86,61,124,.2);
}
.row > .col {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}
<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      1 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </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

"Efficiently manage search suggestions and arrange outcomes for autofill text input utilizing jQuery

Is there a way to eliminate the message and structure the results in a sleek dropdown using CSS without relying on Bootstrap or pre-made CSS files? http://jsfiddle.net/SCuas/96/ var aCleanData = ['test','test1','abcd',' ...

jquerycssautocompletereal-time

Expanding Issue with Bootstrap Navigation

Hello! I am experiencing an issue with my navbar. The menu collapses, but it does not expand. I have used an example from Bootstrap and made some tweaks, but for some reason, it still doesn't expand properly. Below is the code that I have been workin ...

htmlcsstwitter-bootstrap

The CSS selector "not:nth-child" is failing to function properly within the template

Trying to apply a margin-top to all labels except the first one in a row using the :not() and :nth-child selectors. Having trouble with my selector, can anyone help? .form-group:not(:nth-child(1)) + .label { margin-top: 20px; } <div class="form- ...

htmlcsslabel

What is the reason for the lack of an applied CSS selector?

.colored p{ color: red; } article > .colored{ color:powderblue; } .blue{ color: white; } <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initi ...

javascripthtmlcss

What is the best way to ensure that all elements on an HTML webpage stay centered regardless of zoom level?

My HTML and CSS skills are not at an expert level. Despite my best efforts, when I zoom in on the webpage I created, certain elements like the logo and language switcher appear broken. I'm unsure how to address this issue. Can someone please provide m ...

htmlcss

Divs are stubbornly resisting the urge to behave like block elements

.useless { float: right; clear: right; border: 1px dashed blue; height: 50px; width: 100%; } div.pretraga { border: 3px groove red; width: 20%; float: right; margin-right: 5%; border-top: 0; display: flex; justify-content: center; height: 250px; <div cl ...

htmlcssflexbox

What are some creative ways to customize v-slot:cell templates?

Currently, I have the following code snippet within a table: <template v-slot:cell(checkbox)="row" style="border-left='5px dotted blue'"> <input type="checkbox" v-model="row.rowSelected" @input="toggleS ...

cssvue.jsbootstrap-vue

Preventing multiple clicks by toggling the HTML tag on and off

Here is the jQuery structure that I am currently working with: $(document).on('click', '.view-details', function () { $(this).prop("disabled", true); // API call1 // API call2 // API call3 $(this).prop("disabled" ...

javascriptjqueryhtmlcss

Is there a way to reference a background-image using "<img src>" syntax?

Why won't the background image display? It only displays as an img src. How can I call the background-image correctly? <body> <div id="page" style="background- image:url(https://storage.blob.core.windows.net/name/image.png)"> ...

html

Troubleshooting Highcharts container selection problem on Nexus 7 running version 4.2.1

Having a problem with Highcharts on my Nexus 7. When I touch the chart, the entire thing gets selected with a blue overlay, but this doesn't happen on other devices like the Nexus 4. Even when I try accessing demos from Highcharts website, the issue ...

javascriptandroidhtmlhighchartscordova

Creating a container that scrolls horizontally

I am working with ngbootstrap and angular, however, I believe the issue at hand is more related to html/css. My goal is to create a container that scrolls horizontally, despite coming across several helpful threads on this topic, I am struggling to impleme ...

htmlcssng-bootstrap

Creating personalized tags or components by utilizing insertAdjacentHTML in Vue

With the use of insertAdjacentHTML, I am able to create HTML elements such as div and span, but it seems that I cannot generate custom tags like <myComponent> </myComponent>. I understand that insertAdjacentHTML can create HTML elements, but a ...

javascripthtmlvue.js

The stylesheet reference, <link rel="stylesheet" href="../css/style.css">, appears to be malfunctioning

My project structure includes css files in a folder named css and jsp files in a folder named jsp, both located inside the WEB-INF folder. I am wondering how to access the css file within a jsp file. <link rel="stylesheet" href="../css/style.css> T ...

htmlcssjsp

The function .click does not function properly when used with an anchor element within a figure tag

In my JavaScript-loaded figure, there is an image description and two buttons. Sometimes the description contains a link with a fig attribute, like this: <a fig="allow" href="#tt5">[1]</a> If the anchor is not in a figure and has a fig attrib ...

javascriptjqueryhtmlcss

Issue with switching button and content positioned absolutely

Within this container, I have some content followed by a slide toggle button and then more content. The toggle button utilizes the jQuery function slideToggle. All elements within are positioned absolutely. [Introduction Content] Toggle Button [Hidden C ...

jqueryhtml

What can be done to avoid a form being reset when it returns no results?

I've recently created a mysql and php search page, which is working well. However, I noticed that when the form is submitted and there are no results returned, the <option> tags get reset. Is there a way to prevent this from happening? META: I ...

phphtmlmysqlselecthtml-select

Tips for traversing through jquery ui accordion when a single panel has been disabled

I currently have a jQuery UI accordion set up with Next and Previous buttons in each panel to navigate through the sections. Additionally, I have a select HTML element in one of the panels where I can choose an option. If Option 1 is selected, the second a ...

javascriptjqueryhtmljquery-ui

To reveal the secret map location, just tap on the button - but remember, this only applies to

I am encountering an issue with duplicating a card and toggling the hidden location map. Currently, the location button only works for the first card and not for the rest. I need each card to independently open and hide the location map when clicked on the ...

javascripthtmlcss

Handling Errors in Node.js with Express

To access the complete repository for this project, visit: https://github.com/austindickey/FriendFinder After downloading the directory, follow the instructions in the ReadMe to set it up on your computer. Encountering an issue where my survey.html page ...

javascriptjqueryhtmlnode.jsexpress

What could be the reason for Python requests giving me a different text output compared to when I manually visit the website?

I'm in the process of creating a basic 'stock-checker' for a T-shirt that I have my eye on. The link to the product is available here: https://i.stack.imgur.com/usSJN.jpg Upon visiting the page, I noticed that it displays 'Coming Soon ...

pythonhtmlbeautifulsouppython-requests