Why is my column getting devoured even though it has custom content tailored to it?

Question

Why is my column getting devoured even though it has custom content tailored to it?

In my layout, I have one column, one row, and three nested columns. Each column contains a custom-designed button instead of using the default Bootstrap button. However, there seems to be an issue where one of the columns is getting cut off.

To better understand the problem, please refer to this image:

https://i.stack.imgur.com/7VX2n.png

I believe the HTML code is correct. The main div column is set to "col-md-1" for testing responsive elements in a smaller scale. Can anyone explain why the content (button) seems too large for the columns and why they are being hidden?

Below is the snippet of the code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="col-md-1 col-xs-1">
    <div class="row" style="padding:0 !important;margin:0 !important;">
        <div class="col-md-1 col-xs-1" style="padding:0 !important;margin:0 !important;">
            <button class="button"  type="button" style="background-color: green; height: 20vmin; width: 100%; border:none; display: block;"></button>
        </div>
        <div class="col-md-10 col-xs-10" style="padding:0 !important;margin:0 !important;">
            <button class="button"  type="button" style="background-color: red; height: 20vmin; width: 100%; border:none; display: block;"></button>
        </div>
        <div class="col-md-1 col-xs-1" style="padding:0 !important;margin:0 !important;">
            <button class="button"  type="button" style="background-color: black; height: 20vmin; width: 100%; border:none; display: block;"></button>
        </div>
    </div>
</div>

html css twitter-bootstrap

Answer 1

Answer №1

Summary:

An issue arises due to the default 30px column gutter in Bootstrap, causing columns with widths less than 30px to still have a total width of 30px. This results in columns overlapping due to padding extending beyond specified widths.

Exploration:

Functional Code Example

To demonstrate a functional snippet, I've revised the HTML markup by removing inline styles and incorporating CSS classes for clarity and comprehension.

.pa-0 {
  padding: 0 !important;
}
.ma-0 {
  margin: 0 !important;
}
.my-button {
  display: block;
  height: 20vmin;
  border: none;
  outline: none;
  background: transparent;
}
.bg-green {
  background-color: green;
}
.bg-red {
  background-color: red;
}
.bg-black {
  background-color: black;
}
.bg-blue {
  background-color: blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-3 pa-0 bg-blue">
      <div class="row ma-0">
        <div class="col-xs-1 pa-0 bg-green">
          <button class="button my-button" type="button">
          </button>
        </div>
        <div class="col-xs-10 pa-0 bg-red">
          <button class="button my-button" type="button">
          </button>
        </div>
        <div class="col-xs-1 pa-0 bg-black">
          <button class="button my-button" type="button">
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

The Challenge:

This setback stems from how Bootstrap styles columns and rows. Columns possess a 15px gutter on each side while rows exhibit a -15px margin to negate parent container padding (assuming correct syntax usage). This leads to discrepancies when calculating element widths since box-sizing: border-box is applied universally.

For instance, a 100px-wide column actually renders as 70px post-gutter application. When a column's width falls below 30px, its effective width becomes zero, yet padding remains at 30px.

Thus, envisioning the complications ensuing from narrow columns aids in understanding this issue's nuances.

A Resolution:

To alleviate this concern, employing utility classes that nullify both padding and margins on columns and rows enhances their compatibility with contained elements. This strategic intervention upholds accurate sizing without padding conflicts.

I've mirrored Bootstrap 4 nomenclature for these utility classes akin to pa-0, signifying no padding (p: padding, a: all, 0: zero).

Remarks on Initial Markup:

Your stated structure, although functional, could benefit from:

Eschewing inline styles within HTML markup, favoring external CSS for better style management and reusability.
Cognizance of Bootstrap grid guidelines ensures proper containment hierarchy, preventing unexpected style intersections.

Informative Resources:

SO inquiry: Disadvantages of Inline Styling
Wikipedia Entry on Separation of Concerns in Web Development
Bootstrap 3 Grid System Documentation
Comprehensive Guide to Box-Sizing at CSS-Tricks
Exploring Negative Margins via Smashing Magazine
Utility of Bootstrap 4 Spacing Classes

Answer 2

Summary:

An issue arises due to the default 30px column gutter in Bootstrap, causing columns with widths less than 30px to still have a total width of 30px. This results in columns overlapping due to padding extending beyond specified widths.

Exploration:

Functional Code Example

To demonstrate a functional snippet, I've revised the HTML markup by removing inline styles and incorporating CSS classes for clarity and comprehension.

.pa-0 {
  padding: 0 !important;
}
.ma-0 {
  margin: 0 !important;
}
.my-button {
  display: block;
  height: 20vmin;
  border: none;
  outline: none;
  background: transparent;
}
.bg-green {
  background-color: green;
}
.bg-red {
  background-color: red;
}
.bg-black {
  background-color: black;
}
.bg-blue {
  background-color: blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-3 pa-0 bg-blue">
      <div class="row ma-0">
        <div class="col-xs-1 pa-0 bg-green">
          <button class="button my-button" type="button">
          </button>
        </div>
        <div class="col-xs-10 pa-0 bg-red">
          <button class="button my-button" type="button">
          </button>
        </div>
        <div class="col-xs-1 pa-0 bg-black">
          <button class="button my-button" type="button">
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

The Challenge:

This setback stems from how Bootstrap styles columns and rows. Columns possess a 15px gutter on each side while rows exhibit a -15px margin to negate parent container padding (assuming correct syntax usage). This leads to discrepancies when calculating element widths since box-sizing: border-box is applied universally.

For instance, a 100px-wide column actually renders as 70px post-gutter application. When a column's width falls below 30px, its effective width becomes zero, yet padding remains at 30px.

Thus, envisioning the complications ensuing from narrow columns aids in understanding this issue's nuances.

A Resolution:

To alleviate this concern, employing utility classes that nullify both padding and margins on columns and rows enhances their compatibility with contained elements. This strategic intervention upholds accurate sizing without padding conflicts.

I've mirrored Bootstrap 4 nomenclature for these utility classes akin to pa-0, signifying no padding (p: padding, a: all, 0: zero).

Remarks on Initial Markup:

Your stated structure, although functional, could benefit from:

Eschewing inline styles within HTML markup, favoring external CSS for better style management and reusability.
Cognizance of Bootstrap grid guidelines ensures proper containment hierarchy, preventing unexpected style intersections.

Informative Resources:

SO inquiry: Disadvantages of Inline Styling
Wikipedia Entry on Separation of Concerns in Web Development
Bootstrap 3 Grid System Documentation
Comprehensive Guide to Box-Sizing at CSS-Tricks
Exploring Negative Margins via Smashing Magazine
Utility of Bootstrap 4 Spacing Classes

Why is my column getting devoured even though it has custom content tailored to it?

Answer №1

Summary:

Exploration:

Functional Code Example

The Challenge:

A Resolution:

Remarks on Initial Markup:

Informative Resources:

Similar questions

Decrease the gap between rows in CSS Grid

What is causing the input tag and button tag to appear on separate lines instead of together?

Shifting HTML table in Javascript by toggling checkboxes

Is your Ajax jQuery live search not functioning properly with JSON data?

Images of varying sizes aligned at the bottom of cards, organized in rows with pure CSS styling

Perform the same actions on every element within the ul li

Restoring the background color to its original shade following alterations made by jQuery

Separate compound words without hyphens at the boundaries of each word

Determine the vertical dimension of an element through a JavaScript event listener

Why does the order of CSS styling impact my design outcome?

What steps do I need to take in order to integrate an mpg video onto my

Incorporate a button within the input field

Tips for appending the id of an active element to a URL

Display a pleasant alert message when the file is not recognized as an image during the loading

Utilizing Jquery for precise element placement and retrieving its position details

The HTML output is essential for creating the content of a Bootstrap carousel

AngularJS: intercepting custom 404 errors - handling responses containing URLs

When floated to the right, the element is being pushed onto the next line in Firefox

Adjusting specific sections of a container in real-time

How can you access a sibling of the parent element of the current element in Jquery?