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

Ways to conceal the TippyJS tooltip so it doesn't show up on video embeds

Dynamic column group in Datatable - toggle visibility based on user selection

Building a local database using the MVC framework concept

Clear backdrop with solid objects

Preventing CSS shapes from overlapping with the next DIV

Having trouble changing the Font Awesome icon on click?

JavaScript Image Swap

Items are overflowing the flex container, exceeding its boundaries

Passing variables in Redirect() without exposing them in the URL; a methodical approach

Leveraging webpack alongside url-loader for embedding images within React applications

Displaying PHP processes within a DIV instantly using JQUERY, without the need to wait for them to complete

What is the method for achieving the equivalent effect of "background-size: cover" on an <img>?

Is separating Jssor Slider CSS effective?

Sequence of background colors not altering as intended

Generating a dynamic table using Angular

What is the best way to clear and fill a div without causing it to resize?

retrieve the data attribute of a link within an unordered list

Effortless glide while dragging sliders with JavaScript

Boost the scrolling velocity of my sidebar using Jquery

Exchange one HTML element with a different HTML element