Twitter Bootstrap allows for the creation of a row with 5 equal spans

With the fluid grid layout, achieving 4 equal spans is simple:

<div class="row-fluid">
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
</div>

You can also easily obtain 6 equal spans:

<div class="row-fluid">
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
</div>

But what about achieving 5 equal spans? Let's find out!

htmlcsstwitter-bootstrap

Answer №1

I've implemented Bootstrap's guidelines for calculating widths and devised the following method. It is important to maintain the HTML structure as shown below:

<div class="row-fluid-5">
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
</div>

Once you have loaded bootstrap.css and bootstrap-responsive.css, include your custom.css file with the code snippet below:

/* CUSTOM 5 COLUMN SPAN LAYOUT
  *
  * based on http://gridcalculator.dk/
  * width => 1200, gutter => 15px, margin => 15px, columns => 5
  */
 .row-fluid-5 {
   width: 100%;
   *zoom: 1;
 }
 .row-fluid-5:before,
 .row-fluid-5:after {
   display: table;
   line-height: 0;
   content: "";
 }
 .row-fluid-5:after {
   clear: both;
 }
 .row-fluid-5 [class*="span"] {
   display: block;
   float: left;
   width: 100%;
   min-height: 30px;
   margin-left: 1.875%;
   *margin-left: 1.875%;

   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
 }

 .row-fluid-5 .controls-row [class*="span"] + [class*="span"] {

   margin-left: 1.875%;
 }
 .row-fluid-5 [class*="span"]:first-child{
    margin-left: 0;
 }
 .row-fluid-5 .span2 {
   width: 18.5%;
   *width: 18.5%;
 }

 /* responsive ONLY */

 @media (max-width: 600px){ /* spans reduce to 100px then go full width */

    .row-fluid-5 [class*="span"]{
    margin-left: 0;
    float: left;
    width: 100%;
    padding: 10px; 
    }
 }

Feel free to explore the demo linked below to see this layout in action.

DEMO

Answer №2

By default, Bootstrap has 12 columns, so achieving 5 equal spans is not possible mathematically.

However, if you are determined to do so (not recommended for reasons I'll explain shortly), you can customize your Bootstrap download to have 15 columns.

Simply change the @gridColumns variable to 15, then use 5 columns each with a span3.

It's worth mentioning that this may not be the best idea. The reason Bootstrap uses 12 columns is because it works well and provides support for various column widths like 1/4, 1/3, and 1/2. With a 15 column layout, you will mainly have support for 1/3 width columns and some odd sizes. Ultimately, the choice is yours, but the option is available.

Answer №3

To achieve 5 equal rows in a 12-column grid, you must generate a custom grid layout, such as one with 10 columns instead. Check out this link for more information on how to customize your grid: Customizing Grids

Answer №4

One effective way to tackle this issue is by including the following code snippet in your CSS file, or directly in the bootstrap.css. I personally find this method to be the most convenient. Initially, the "15" value might seem confusing, but just keep in mind that it represents 1/5th of the total width.

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

After implementing the above code, you can utilize it in the same manner as any other bootstrap class.

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

Answer №5

Ah, that's pure mathematics at play here. It's not really a CSS/Bootstrap issue...

You won't be able to evenly divide a row into 5 equal spans using Bootstrap because its default grid system is based on 12 columns, and 12 / 5 = 2.4.

Answer №6

To simplify this, I would turn it into a problem where 10 divided by 2 equals 5. This can be achieved by organizing the content in fluid rows with span10 as the parent and span2 as the children. Here's how it looks:

<div class="container-fluid">
    <div class="row-fluid span10">
            <div class="row-fluid">
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
            </div>
    </div>
    <div class="row-fluid span10">
            <div class="row-fluid">
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
            </div>
    </div>
</div> <!-- /container -->

Answer №7

.span3 {   width: 220px; }
.span2 {   width: 140px; }

Alternatively, you can use:

.row-fluid .span3 {   width: 23.404255319148934%;   *width:
23.351063829787233%; }

.row-fluid .span2 {   width: 14.893617021276595%;   *width:
14.840425531914894%; }

The above code snippets provide the specified width of elements. You can also customize it by adding:

class="span" style="width:180px"

or 

class="span" style="width:19.1488%"

Make sure to include the 'span' class as Bootstrap requires it for proper functioning within a .row.

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

What could be the reason my SVG images are not displaying?

My website contains SVGs that are not loading consistently. I acquired some from freeicons/icon8 and created a couple using Inkscape. Initially, I inserted them using HTML but switched to CSS after doing research online on how to ensure they load properly ...

htmlcsssvg

What is the best way to apply a class to the initial div using jquery?

I have the following HTML code: <div class="main"> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> </div> <div class="main"> <div class="sub"></div> <di ...

jqueryhtml

Assistance with Blackberry Webworks (Widget) JavaScript & XML/JSON Integration

Let me paint you a picture... I am in the process of crafting a Blackberry WebWorks (widget) that serves as a gateway to an external website. The majority of the pages reside on this remote site, with the exception of a user customizable homepage where us ...

javascripthtmlxmljsonblackberry-widgets

Position the Anchor element at the center with the flex attribute inside the li element

How can I center text anchor inside an li element using bootstrap (without CSS if possible)? .nav-lt-tab .nav-item .nav-link { background-color: transparent; border-top: 3px solid #e0e0e0; } <html> <head> <link rel="stylesheet" h ...

cssbootstrap-4

What is the best way to send data through a modal using bootstrap?

Today, I am attempting to finish the project, only to realize that the edit function I coded is not functioning correctly. Every time I click on the edit button, it shows the same values instead of displaying the corresponding data in a specific modal. Th ...

phphtmltwitter-bootstrapcodeigniter

Hide when reaching the end with d-none

One of the challenges I'm facing is aligning a button to the right side of a column while still utilizing d-none to control its display. Previously, I used d-flex justify-content-md-around justify-content-lg-end for alignment before adding d-none, but ...

csstwitter-bootstrapbootstrap-5

Error encountered while trying to access gltf model on Google Drive due to CORS issue

Is there a way to load a gltf model into an Aframe scene from Google Drive? Here is the current code I am using: <a-entity gltf-model="url(https://drive.google.com/uc?export=view&id={redacted})"></a-entity> However, I keep encountering th ...

htmlthree.jsgoogle-drive-apicorsaframe

Looking to separate a string following a specific word?

Below is the code snippet provided: var url="https://muijal-ip-dev-ed.my.salesforce.com/apexpages/setup/viewApexPage.apexp?id=066415642TPaE"; The desired output from this string is: url="https://muijal-ip-dev-ed.my.salesforce.com/" We want to keep only ...

javascriptjqueryhtmlattributes

Comparing innerHTML in JavaScript: A guide to string comparison

While attempting to filter a table alphabetically, I encountered an obstacle. The x.innerHTML > y.innerHTML concept in this code snippet is perplexing me: table = document.getElementById('myTable'); rows = table.getElementsByTagName('t ...

javascripthtmlstringif-statementcomparison

The 3D Circle Flip feature on a certain webpage designed by Nordstrom is experiencing issues when viewed on Firefox

Click here to see a 3D Circle Flip effect. It works correctly in Chrome, but in Firefox the text does not change when flipping. ...

css

Ways to effectively go through local storage using a loop

I'm currently working on enhancing my navbar by adding links based on searches made by users and their favorite selections. My goal is to avoid duplicate entries in the "past searched" section if the current search already exists in the list. I'm ...

javascripthtmljquerylocal-storage

jQuery regex failing to display latest changes

I am running into some issues with my custom jQuery snippet that is supposed to dynamically display the results. Each H2 tag contains an image, and I want to ensure the image is positioned correctly next to the word "test." Here is the script in question: ...

htmljqueryregex

Adaptable Image Maintains Integrity

My code is generating the following output: While I want the images to resize when dragged in, one of the right-hand images does not move below the main image as intended. Here is my code: Can anyone help me resolve this issue? Check out my CSS and HTML ...

htmlcssimageresponsive-design

Aligning an image in a way that adjusts to different screen sizes

Struggling with centering an image horizontally in a responsive manner while using Bootstrap v3.3.5? Here's my code: <div class="container"> <div style="margin:0 auto;"> <img src="images/logo.png" alt="logo" /> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is there a way to determine if jQuery Mobile has already been loaded?

I am dynamically loading jqm and I'm trying to determine if it has been previously loaded in certain scenarios. Is there a method to check for the presence of jqm? ...

javascriptjqueryhtmljquery-mobile

Show the entire webpage in an iframe with specific dimensions

Greetings, fellow internet users! I'm currently facing a challenge involving displaying a website within an iframe. My goal is to have the iframe show the entire screen of the website without any scrollbars. So far, the only solution I've found ...

htmlcssiframeiframe-resizer

When the window is scrolled to 50%, I would like to load some additional data

Looking to load data when the browser scrollbar reaches 50%... In jQuery, I created the following function: $(window).on('scroll', function () { alert("scrolling"); if ($(window).scrollTop() + $(window).innerHeight() > ...

javascriptjqueryhtml

JQuery code embedded in HTML fails to run for the second time

I'm having some trouble with highlighting specific words on my HTML page. The page looks like this html page and here's the code: <!DOCTYPE html> <html> <body> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...

javascripthtmljquery

How to Choose Between Landscape and Portrait Printing Modes in Firefox and Internet Explorer 8

Currently, I am using the latest version of FireFox and IE8. In order to change the printing orientation, I utilized the following code in my CSS file: @page { size: portrait; } You can find more information about the @page property here. Although it i ...

javascriptjqueryhtmlcssprinting

``motioning a component beneath another component that may be in a state

Having an issue with my CSS. I have some elements generated by JavaScript and when hovering over them, another element is displayed below the others for some reason. Here's the CSS related to this problem: .hiddenTextjob { display:none; ...

javascripthtmljquerycss