How to Center a Bootstrap Div with a 'Spanx' Class

@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css');
html,
body {
  height: 100%
}

<div class="h-100 d-flex align-items-center justify-content-center">
  <div style="background:red">
    TEXT
  </div>
</div>

Bootstrap responsive - Ignore 'spanX' when viewing on mobile

It will span the entire width.

The css of Bootstrap converts all elements with a span* class to block elements with 100% width for devices with screen width less than 767px; consequently, there's not really a 'grid' for mobile.

Here's the code that does this:

[class*="span"],
.uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="span"] {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    .box-sizing(border-box);
  }

Source: The Bootstrap mobile layout .less file, line 60

Center table with Twitter Bootstrap 2

Create a new style -

.center-table
{
  margin: 0 auto !important;
  float: none !important;
}

and apply it to the table -

<table class="span5 center-table">
  <tr>
    <td>This is a centered table</td>
  </tr>
</table>

Spanx class not working

Looks like you're using Bootstrap 2, which uses a conventional box model. By adding padding to your spans, you've effectively widened them, so they no longer fit in a single row and wrap.

Instead, add a child div to your span* elements and put margin on that.

Bootstrap 3 alleviates some of these issues by applying box-sizing: border-box across the board, which includes padding in width calculations.

Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?

New Answer (requires LESS 1.4.0)

What you actually desire is something known as extending in LESS and SASS terminology. For example, you want an HTML element (just an example)...

<div class="myclass"></div>

...to fully behave as if it had a span3 class from bootstrap added to it, but without actually adding that class in the HTML. This can be done in LESS 1.4.0 using :extend(), but still not easily, mainly because of the dynamic class generation of bootstrap will not be picked up by :extend().

Here is an example. Assume this initial LESS code (not dynamically generated .span3 classes as bootstrap does):

.span3 {
  width: 150px;
}

.someClass .span3 {
  font-size: 12px;
}

.someOtherClass.span3 {
  background: blue;
}

You add this LESS code in 1.4.0:

.myclass {
  &:extend(.span3);
}

Which produces this CSS:

.span3,
.myclass {
  width: 150px;
}
.someClass .span3 {
  font-size: 12px;
}
.someOtherClass.span3 {
  background: blue;
}

NOTE how it did not automatically extend the other instances of .span3. This is different than SASS, but it only means you need to be a bit more explicit in extending. This has the advantage of avoiding excessive CSS code bloat.

To fully extend, simply add the all keyword in the extend() (this is updated from my original code, as I was unaware of the all option):

.myclass {
  &:extend(.span3 all);
}

Which produces this:

.span3,
.myclass {
  width: 150px;
}
.someClass .span3,
.someClass .myclass {
  font-size: 12px;
}
.someOtherClass.span3,
.someOtherClass.myclass {
  background: blue;
}

That makes your .myclass fully equivalent (in my example) to the .span3 class. What this means in your case, however, is that you need to redefine any dynamic class generations of bootstrap to be non-dynamic. Something like this:

.span3 {
  .span(3);
}

This is so the :extend(.span3) will find a hard coded class to extend to. This would need to be done for any selector string that dynamically uses .span@{index} to add the .span3.

Original Answer

This answer assumed you desired to mixin properties from a dynamically generated class (that is what I thought your issue was).

Okay, I believe I discovered your issue. First of all, bootstrap defines the .spanX series of classes in the mixins.less file, so you obviously need to be sure you are including that in your bootstrap load. However, I assume it is a given that you have those included already.

Main Problem

The main issue is how bootstrap is generating those now, through a dynamic class name in a loop. This is the loop that defines the .spanX series:

.spanX (@index) when (@index > 0) {
      .span@{index} { .span(@index); }
      .spanX(@index - 1);
 }
.spanX (0) {}

Currently, because the class name itself is being dynamically generated, it cannot be used as a mixin name. I don't know if this is a bug or merely a limitation of LESS, but I do know that at present time of writing, any dynamically generated class name does not function as a mixin name. Therefore, .span3 may be in the CSS code to put as a class in your HTML, but it is not directly available to access for mixin purposes.

The Fix

However, because of how they have structured the code, you can still get what you need, because as you can see above in the loop code, they use a true mixin itself to define the code for the .spanX classes. Therefore, you should be able to do this:

.myclass {
    .span(3);
    // other rules...
}

The .span(3) code is what the loop is using to populate the .span3 class, so calling it for your classes will give the same code that .span3 has. Specifically bootstrap has this defined in mixins.less for that mixin:

.span (@columns) {
  width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
  *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}

So you will get the width properties for the .span3 in your .myclass.

How to efficiently implement BS2 .spanX semantics in Bootstrap 3?

About your Q1, i don't think you can avoid having a lot of classes when you want to generate all possible opportunities. Generating all classes also does not make your code more semantic i think so.

But you can use the list functions (see: http://lesscss.org/functions/#list-functions) maybe to generate the semantic widths:

.setwidths(@levels;@width:100%;@level:1;@columns:12) when (length(@levels) >= @level){
.setwidths(@levels;  @width * ( extract(@levels,@level) / @columns ); @level + 1;  extract(@levels,@level));
}
.setwidths(@levels;@width;@level;@columns) when (default()){
width: @width;
}
property {
.setwidths(6 4 2);
}

In the above the .setwidths(6 4 2); call sets the width for the third level (span6 > span4 > span 2)

Than Q2:

if you HTML may, non semantic, contain grid classes you can use a base class:

.span {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}

with in your HTML: class="span span{X}"

or when you use the :extend pseudo class, see http://lesscss.org/features/#extend-feature, you should be able to create a (long) list of selector which share the same list of properties, for instance:

.selector {
&:extend(.span);
.setwidths(6 4 2);
}

Notice that attribute selectors can be use as an alternative for base classes:

[class^="span"], [class*=" span"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

Bootstrap itself avoids (partial) attribute selectors because of performance issues. See also: http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

How to use SpanX in bootstrap in web?

Bootstrap 3 uses col-* instead of span*..

<div class="container">  
  <div class="row">  
    <div class="col-md-4"><p>Col1.</p></div>  
    <div class="col-md-4"><p>Col2.</p></div> 
    <div class="col-md-4"><p>Col3.</p></div> 
  </div>    
</div> 

http://bootply.com/126717

Also see: Whats new in Bootstrap 3

Bootstrap: two column centered

Add a container, remove the center div and add two blank col-lg-2 on either side so it adds up to 12 columns:

<div class="container">
 <div class="row">
  <div class="col-lg-2">
  </div>
  <div class="col-lg-3 gauche">
  Left div
  </div>

  <div class="col-lg-5 corps">
  Right div
  </div>
  <div class="col-lg-2">
  </div>
 </div>
</div>

---

Related Topics