Building a row of five dynamic columns using Bootstrap's responsive design

I'm looking to set up a row with 5 responsive columns that have equal padding on all sides, but I'm struggling to find the best way to do this using Bootstrap.

Here's my current HTML:

  <div class="row five-col-row">
    <div class="col col-md-2 mx-2">
      <h6>Sources</h6>
      <span>{{ allStats.sources }}</span>
    </div>
    <div class="col col-md-2 mx-2">
      <h6>Installs</h6>
      <span>{{ allStats.installs }}</span>
    </div>
    <div class="col col-md-2 mx-2">
      <h6>Conversions</h6>
      <span>{{ allStats.conversions }}</span>
    </div>
    <div class="col col-md-2 mx-2">
      <h6>Amount</h6>
      <span>{{ allStats.conversion_amount }}$</span>
    </div>
    <div class="col col-md-2 mx-2">
      <h6>Churn rate</h6>
      <span>{{ allStats.churn_rate }}%</span>
    </div>
  </div>

Any suggestions on how to create a responsive grid with five columns in Bootstrap?

My desired outcome looks like this:

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

I would appreciate any help. Thank you.

htmlcsstwitter-bootstrapbootstrap-4sass

Answer №1

Avoid using margin-x on .col-* elements.

  1. Instead, set your custom padding-x on .col-*.

  2. Set padding-y on row. It should be double the padding-x of .col-*. For example, if you have a 10px padding-x on columns, the padding-y of row should be 20px because there is 20px space between the columns.

  3. Enclose the content of the .col-* elements in a div and apply all styles to this element instead of the column itself.

div.col div {
  border: 1px solid #000; 
  height: 200px;  
}

.py-1rem {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row py-1rem">
    <div class="col col-md-2 px-2">
      <div></div>
    </div>
    <div class="col col-md-2 px-2">
      <div></div>
    </div>
    <div class="col col-md-2 px-2">
      <div></div>
    </div>
    <div class="col col-md-2 px-2">
      <div></div>
    </div>
    <div class="col col-md-2 px-2">
      <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

Incorporating an Angular 2 Directive within the body tag of an

My goal is to create a custom directive that can dynamically add or remove a class from the body element in HTML. The directive needs to be controlled by a service, as I want to manage the visibility of the class from various components. Question: How ca ...

javascripthtmlangulartypescript

How can I navigate and click on a drop-down menu link in Python using Selenium and CSS selectors?

This is an example of the HTML code: <span class="MenuIcons searchButton"></span> ... (additional content) <a data-bind="" url="/ParagonLS/Search/Property.mvc/Index/1" tabdescription="RESIDENTIAL" subtabdescription="Criteria" subtab ...

pythoncssselenium

Exploring the World of Micro-Frontends with the Angular Framework

I am conducting research on the best methods for transitioning a large single-page application into a micro-frontend architecture. The concept: The page is made up of multiple components that function independently Each component is overseen by its own ...

javascripthtmlangularmicroservices

Switch the background color alternately from red to green every second

Need help with a webpage that changes the background color every second using JavaScript. The issue lies in figuring out how to correctly change the variable within the function. Here's an example of the code: <!DOCTYPE html> <html> ...

javascripthtmlloops

Are you looking to test your website's performance under limited bandwidth conditions

Similar Query: How can I test a website for low bandwidth? Would it be possible to mimic a slow internet connection to test my website's performance? I need to simulate lower speed conditions in order to observe how the site behaves. ...

jqueryhtmlcss

Embedding a CSS file into a PHP class

I've encountered a little issue that I can't seem to solve on my own. I've put together a "webengine" using multiple classes. The primary class responsible for obtaining a theme's internals is called "Logic". This Logic class contain ...

phphtmlcss

Transform **kerry James O'keeffe-martin** into **Kerry James O'Keeffe-Martin** using TypeScript and Java Script

Is there a way to capitalize names in both TypeScript and JavaScript? For example, changing kerry James O'keeffe-martin to Kerry James O'Keeffe-Martin. ...

javascripthtmltypescript

Blending PHP with jQuery

I'm currently working on the same page as before but this time, I'm using it to experiment with jQuery. I'm trying to learn it for my 'boss', but unfortunately, I can't seem to get the JavaScript in this file to run at all, le ...

phpjqueryhtml

I require displaying the initial three letters of the term "basketball" and then adding dots

Just starting out with CSS and struggling with the flex property. Seems to work fine at larger sizes, but when I reduce the screen size to 320px, I run into issues... Can anyone help me display only the first three letters of "basketball ...

javascripthtmlcss

Adjust the Size of Bootstrap Offcanvas using CSS (Bootstrap version 5.2)

Is there a way to change the size of specific bootstrap offcanvas elements without affecting all of them? I am aware that I can modify the SASS variable ($offcanvas-horizontal-width: 400px) to change the size of all offcanvas elements. What I would like i ...

htmlcssbootstrap-5

Move the DIV element to a static section within the DOM

In my Vue app, I have implemented methods to dynamically move a DIV called 'toolbox' to different sections of the DOM. Currently, the DIV is positioned on the bottom right of the screen and remains static even when scrolling. My goal is to use t ...

javascriptcssvue.jspositioncss-position

The syntax error in the Svelte conditional element class is causing issues

Trying to create an if block following the Svelte Guide for if blocks. The process appears straightforward, yet Svelte is flagging it as a syntax error: [!] (svelte plugin) ParseError: Unexpected character '#' public\js\templates\ ...

javascriptcsssvelte

What is the best way to center align two inner divs within a container?

I've been working on achieving the following design: https://i.sstatic.net/ckC3j.png Just to clarify, the dashed line represents a guide indicating that both .inner-a and .inner-b are aligned in the middle horizontally and vertically within the imag ...

csstwitter-bootstrapbootstrap-4

Creating a custom HTML table layout with both variable and fixed column widths, along with grouping headers

Is there a way to format an HTML table so that it appears like this: <- full page width -> <-20px->< dynamic ><-20px->< dynamic > +------------------+-------------------+ ¦ A ¦ B ...

htmlcsshtml-table

What is the best way to add styling to my image when hovered over within a link on a responsive website?

I'm having trouble aligning the :hover state with the original footer image links. Here is an edited version of the flicker issue I encountered on Chrome, while nothing appeared on Safari. https://i.sstatic.net/ExdPW.png I apologize for linking to ...

htmlcss

How can you turn a SWFObject into a clickable link?

Is there a way to create a clickable link using a .swf flash file with swfObject? I want the entire video to be clickable, but I'm struggling to figure out how to do it. If you take a look at this example here: , you'll see that they were able ...

htmlcssflashhyperlinkswfobject

Enhancing User Interaction with Bootstrap Input Forms

Struggling with a CSS and Bootstrap issue, I am unable to find a solution. The problem I am facing is that the content in a div form is not responsive within its parent div. It always extends beyond the parent div and does not adjust its size when the scre ...

cssbootstrap-5

Fixing the bootstrap delete modal to only delete the initial row

I'm facing an issue where only the first row gets deleted when I try to delete a row in PHP using Bootstrap modal. ajout.php is the page where I trigger deleteEntreprise.php with an ID. $pdo = new PDO('mysql:dbname=test;host=localhost',&ap ...

phpmysqlbootstrap-4

Using JQuery to monitor the loading of a newly selected image src attribute

As a newcomer to JavaScript and JQuery, I am facing a challenge that I couldn't find a solution for in other discussions: I have a function that retrieves the path to an image (/API/currentImage) using a GET request and needs to update the src attrib ...

javascriptjqueryhtmlajaximage

Keep the link underlined until a different button is pressed

I need help with a webpage that displays a list of partners organized by categories. When clicking on sidebar categories, the link remains underlined. However, if you click anywhere else on the page, the link becomes inactive. CSS: button:hover { t ...

javascriptjqueryhtmlcss