Rectangle 27 4

This layout can be achieved with CSS flexbox.

For both columns to have equal height we can use the align-items property, which controls space distribution among flex items on the cross-axis.

The default value is stretch, which enables items to extend the full length of the container.

.container-outer { align-items: stretch; }

We can also use the flex-grow property to control how free space is distributed among flex items in the main-axis.

.post-content { flex-grow: 1; }

The code below renders this (with borders only for demo purposes):

.container-outer {
    display: flex;
    align-items: stretch; /* tells boxes to stretch vertically (default value)  */
    width: 75%; 
    min-height: 250px;
    border: 5px solid mistyrose;   
}
.user-info {
    display: flex;          /* nested flexbox, to enable flex properties */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    border: 3px solid red;
    font-family: verdana;
    font-weight: bold;
    font-size: 2em;
    color: red;
    box-sizing: border-box;
    overflow: auto;
}
.container-inner {
    display: flex;         /* nested flexbox */
    flex-direction: column;
    width: 100%;
    border: 3px dashed black;
    overflow: auto;
}
.post-description {
    display: flex;         /* nested flexbox */
    justify-content: center;
    align-items: center;
    height: 50px;          /* fixed height */
    border: 3px solid green;
    font-family: verdana;
    font-weight: bold;
    font-size: 1.5em;
    color: green;
    box-sizing: border-box;
    overflow: auto;
}
.post-content {
    display: flex;          /* nested flexbox */
    justify-content: center;
    align-items: center;
    flex-grow: 1;          /* box takes all available space (stretch, basically) */
    border: 3px solid blue;
    font-family: verdana;
    font-weight: bold;
    font-size: 2em;
    color: blue;
    box-sizing: border-box;
    overflow: auto;
}
<article class="container-outer">
    <section class="user-info">USER<br>INFO</section>
    <div class="container-inner">
        <section class="post-description">POST DESCRIPTION</section>
        <section class="post-content">POST CONTENT</section>
    </div><!-- end .container-inner -->    
</article><!-- end .container-outer -->

Regardless of how much or how little content is placed in USER INFO or POST CONTENT, both columns will remain equal height.

The container is given a minimum height (min-height: 250px;) to ensure it doesn't get too small if there is no content in either box.

flex-grow is only applied to POST CONTENT because USER INFO already expands full height by inheriting height from the container, and POST DESCRIPTION has a fixed height, so it won't expand.

html - Layout with two equal height columns and one column has two row...

html css css3 flexbox multiple-columns
Rectangle 27 6

Sidebar in a column

There are actually three manners in which you can make a bootstrap 3 sidebar. I tried to keep the code as simple as possible.

Here you can see a demo of a simple fixed sidebar I've developed with the same height as the page

I've also developed a rather simple column sidebar that works in a two or three column page inside a container. It takes the length of the longest column. Here you can see a demo

If you google bootstrap dashboard, you can find multiple suitable dashboard, such as this one. However, most of them require a lot of coding. I've developed a dashboard that works without additional javascript (next to the bootstrap javascript). Here is a demo

For all three examples you off course have to include the jquery, bootstrap css, js and theme.css files.

If you want the sidebar to hide on pressing a button this is also possible with only a little javascript.Here is a demo

Collapsing Sidebar with Bootstrap 3 - Stack Overflow

twitter-bootstrap-3 sidebar collapse
Rectangle 27 65

Your code was checking all columns within any container, what you need to do is:

  • Get the heights of each column within that container
  • Apply that height to every column in that container before moving on to the next one.

Note: Try to provide an example jsfiddle of your issue, it enables us to more easily help you and understand the issue, you get to see the working solution straight away and it encourages quicker responses.

$(document).ready(function(){

    // Select and loop the container element of the elements you want to equalise
    $('.container').each(function(){  
      
      // Cache the highest
      var highestBox = 0;
      
      // Select and loop the elements you want to equalise
      $('.column', this).each(function(){
        
        // If this box is higher than the cached highest then store it
        if($(this).height() > highestBox) {
          highestBox = $(this).height(); 
        }
      
      });  
            
      // Set the height of all those children to whichever was highest 
      $('.column',this).height(highestBox);
                    
    }); 

});
.container { border 1px solid red; }
.column { border: 1px solid blue; float:left; width: 30%; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="container">
    <div class="column">This is<br />the highest<br />column</div>
    <div class="column">One line</div>
    <div class="column">Two<br />lines</div>
</div>
<div class="container">
    <div class="column">One line</div>
    <div class="column">Two<br>lines</div>
    <div class="column">One line</div>
</div>

Here's a library i found that looks promising if you want some more clever equalisation controls

Question: Will $(document).ready() work if you have images that need to load which in turn modify the heights of the containers?

If you are loading images, you will find that this solution doesn't always work. This is because document.ready is fired at the earliest possible time, which means it does not wait for external resources to be loaded in (such as images).

When your images finally load, they may distort the heights of their containers after the equalisation script has run, causing it too appear not too work.

Solving equalising heights with images

This is the best solution (at the time of writing) and involves binding to the img.load event. All you have to do is get a count of how many img's there are $('img').length and then for each load, -1 from that count until you hit zero, then fire the equaliser.

The caveat here is load may not fire in all browsers if the image is in the cache. Look around google/github, there should be a solution script out there. At the time of writing i found waitForImages from Alexander Dickson (untested, this is not an endorsement).

  • Another more reliable solution is the window.load event. This should generally always work. However, if you check the docs out, you'll notice this event fires after ALL external resources are loaded. This means if your images are loaded but there's some javascript waiting to download it won't fire until that completes.

If you load the majority of your externals asyncronously and are clever with minimising, compressing and spreading the load you probably wont have any issues with this method, however a suddenly slow CDN (happens all the time) could cause issues.

In both cases, you could take a dumb approach and apply fallback timers. Have the equalise script run automatically after a set few seconds just in case the event doesn't fire or something is slow out of your control. It's not fool proof, but in reality you'll satisfy 99% of your visitors with this fallback if you tune the timer correctly.

yep, had i not messed around creating a fiddle from scratch it could have been more like 5 maybe, but on a more serious note, had the javascript been more complex some people may not have even bothered to help without a fiddle as they may want to "see it in action" in order to solve it. Get people into good habits early and it helps them in the long term i suppose :)

Thats strange, might be the word "fiddle" (if you dont understand why i'm not going to explain though). If you ask them they will probably unblock it for you since its for educational purposes. But if your interested in seeing the code i posted i'll chuck it into the post above for you now

html - Setting equal heights for div's with jQuery - Stack Overflow

jquery html height equals
Rectangle 27 1

Richard Sussans answer is right, but you need to float the columns (both left) in order to make them appear next to eachother. You also need to specify a height for the columns (as well as their parent elements, assuming the height is set in %) for their children to expand vertically. With your markup, the following css should do the trick:

html, body, .container {
    height: 100%;
}
.left {
    float: left;
    height: 100%;
    width: 35%;
}

.right {
    float: left;
    height: 100%;
    width: 65%;
}

.col-1-1 {
    height: 25%;
}

.col-1-2 {
    height: 75%;
}

.col-2-1 {
    height: 33%;
}

.col-2-2 {
    height: 33%;
}

.col-2-3 {
    height: 34%;
}

... and you only need to specify the width of the columns, as opposed to each element. The .col* elements will take up 100% of their parent's width. Edited my answer.

html - Using CSS to create two equal height layout columns, and insert...

html css layout height equals
Rectangle 27 2

What you can do is to use semantic elements for your content. Don't put text in meaningles divs, use Paragraphs and Links. They won't be as tall as the column.

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
        <p>Some content on the left that's going to be smaller than right</p>
    </div>

    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
         <ul>
         <li>A </li>
         <li>b </li>
         <li>c </li>
         <li>d </li>
         </ul>
    </div>
</div>

What is your desired output, maybe you are using the grid system in an inefficient way? If we would have more info on how the result should look like we could offer some other solutions to you?

html - Remove equal height in Bootstrap 4 row columns - Stack Overflow

html css twitter-bootstrap bootstrap-4
Rectangle 27 3

1. Aligning content of the column to the bottom

When working with bootsrap usually face three main problems:

  • How to place the content of the column to the bottom?
  • How to create a multi-row gallery of columns of equal height in one .row?
  • How to center columns horizontally if their total width is less than 12 and the remaining width is odd?
<style>
    [class*=col-] {position: relative}
    .row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
    .row-centered {text-align:center}   
    .row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top} 
</style>

<script src="assets/conformity/conformity.js"></script>
<script>
    $(document).ready(function () {
        $('.row-conformity > [class*=col-]').conformity();
        $(window).on('resize', function() {
            $('.row-conformity > [class*=col-]').conformity();
        });
    });
</script>
<div class="row row-centered">
    <div class="col-sm-3">...</div>
    <div class="col-sm-4">...</div>
</div>
<div class="row row-conformity row-centered">
    ...
</div>

css - Bootstrap 3: How do you align column content to bottom of row - ...

css css3 twitter-bootstrap twitter-bootstrap-3
Rectangle 27 3

1. Aligning content of the column to the bottom

When working with bootsrap usually face three main problems:

  • How to place the content of the column to the bottom?
  • How to create a multi-row gallery of columns of equal height in one .row?
  • How to center columns horizontally if their total width is less than 12 and the remaining width is odd?
<style>
    [class*=col-] {position: relative}
    .row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
    .row-centered {text-align:center}   
    .row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top} 
</style>

<script src="assets/conformity/conformity.js"></script>
<script>
    $(document).ready(function () {
        $('.row-conformity > [class*=col-]').conformity();
        $(window).on('resize', function() {
            $('.row-conformity > [class*=col-]').conformity();
        });
    });
</script>
<div class="row row-centered">
    <div class="col-sm-3">...</div>
    <div class="col-sm-4">...</div>
</div>
<div class="row row-conformity row-centered">
    ...
</div>

css - Bootstrap 3: How do you align column content to bottom of row - ...

css css3 twitter-bootstrap twitter-bootstrap-3
Rectangle 27 7

Or even better use the date data type for that column.

You need to convert the date string to a real date

select * from time_track 
where STR_TO_DATE(track_date ,'%d/%m/%Y') between '2015-01-01' and '2015-01-21'

Then you don't need to convert the data in your queries and can make use of indexes which makes it run super fast.

php - Between in mysql where clause not working - Stack Overflow

php mysql date where between
Rectangle 27 4

Equal height columns is the default behaviour for Bootstrap 4 grids.

.col { background: red; }
.col:nth-child(odd) { background: yellow; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
      <br>
      Line 2
      <br>
      Line 3
    </div>
    <div class="col">
      1 of 3
    </div>
  </div>
</div>

html - How can I make Bootstrap 4 columns all the same height? - Stack...

html css twitter-bootstrap
Rectangle 27 4

Equal height columns is the default behaviour for Bootstrap 4 grids.

.col { background: red; }
.col:nth-child(odd) { background: yellow; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
      <br>
      Line 2
      <br>
      Line 3
    </div>
    <div class="col">
      1 of 3
    </div>
  </div>
</div>

html - How can I make Bootstrap 4 columns all the same height? - Stack...

html css twitter-bootstrap
Rectangle 27 73

Here's a responsive CSS solution, based on adding a large padding and an equally large negative margin to each column, then wrapping the entire row in in a class with overflow hidden.

.col{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#ffc;
}

.col-wrap{  
    overflow: hidden;   
}

In response to a question, here's the same technique in Bootstrap 3, same principle, just update the class names in the Bootstap grid: http://jsfiddle.net/panchroma/bj4ys/embedded/result/

One drawback, the background is drawed and jsut hidden because of the overflow. Meaning if you render something else then a static color you dont see the bottom border. try it together with call well on each column.

If the elements have borders, this won't look right...right?

Yes, but if you're just letting the inner boxes grow vertically and cutting them off at some arbitrary height, then some boxes may grow past the outer box, cutting off the bottom border. Unless I misunderstood this solution.

css - Using twitter bootstrap 2.0 - How to make equal column heights? ...

css twitter-bootstrap
Rectangle 27 9

$(document).ready(function(){

    $('.container').each(function(){  
        var highestBox = 0;

        $(this).find('.column').each(function(){
            if($(this).height() > highestBox){  
                highestBox = $(this).height();  
            }
        })

        $(this).find('.column').height(highestBox);
    });    


});

nice timing.. I was about to post the same :)

html - Setting equal heights for div's with jQuery - Stack Overflow

jquery html height equals
Rectangle 27 2

2) Right-align the text within the columns

  • alignment of the columns themselves is different
  • alignment of text in the columns is centred, not right-aligned
  • you probably want to use a fixed number of decimal points in your numeric output

I think this is to do with using the TableLayout. As you can see in my previous example, I prefer to use RelativeLayout. When you get the hang of it you will see it is very powerful.

I would use my example below as a starting point for a single row, and make 2 more similar rows below that using the layout_below tag to position them below the row above.

Your TextView items are being centred in the columns, due to using the layout_weight="1" tag. If you instead use the RelativeLayout as described above, the text views themselves are being set to the right.

To correctly align numbers, it helps to use a fixed number of decimal points. In your case it looks like you might need 4 decimal places.

myTextView.setText(String.valueOf(myNumber);

Instead of that, use the String.format() method to set the number of decimal places:

myTextView.setText(String.format("%.4f", myNumber);

I was hoping to get something working with an XML Drawable that uses the stroke style, but ran into some strange issues. You might want to play around with that concept a bit.

However what I've done many times in the past is similar to what ArianJM recommends.

<View
    android:layout_width="0dp"
    android:layout_height="1px"
    android:layout_alignBaseline="@+id/tvLabel1"
    android:layout_toLeftOf="@+id/tvSizeMb1"
    android:layout_toRightOf="@+id/tvLabel1"
    android:background="#333"
    tools:ignore="PxUsage" />

Note the use of px instead of dp for the height attribute. This creates a sharper image, and by using a 1px value, the line is not very strong. You could improve this by using a slightly transparent colour for the line.

You could use a basic ListView to display your items. The list view can use a custom XML layout for each item, that aligns the text the way you want it to.

For example, here is a RelativeLayout that aligns 2 text fields in the way you want them to be aligned:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp" >

    <TextView
        android:id="@+id/tvLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="Total" />

    <TextView
        android:id="@+id/tvSizeMb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="4.57MB" />

</RelativeLayout>

Then below your list view, you would want to display your "Cache" row. Use the same layout for this, and the items will align correctly.

What about the lines between the labels and the TextViews ?

I didn't mentioned anything about divider, but I did mention the lines(or dots) between the Labels and the TextViews. I'd be really nice if I could do display something like "Total ......... $ 250"

Thank you guys! I really wished I could mark all three answers because all of them help, but since the answer provided by @Richard was the most complete, I decided to mark it as the answer

android - ListView that shows numbers with a total at the bottom - Sta...

android android-listview android-ui android-tablelayout
Rectangle 27 2

2) Right-align the text within the columns

  • alignment of the columns themselves is different
  • alignment of text in the columns is centred, not right-aligned
  • you probably want to use a fixed number of decimal points in your numeric output

I think this is to do with using the TableLayout. As you can see in my previous example, I prefer to use RelativeLayout. When you get the hang of it you will see it is very powerful.

I would use my example below as a starting point for a single row, and make 2 more similar rows below that using the layout_below tag to position them below the row above.

Your TextView items are being centred in the columns, due to using the layout_weight="1" tag. If you instead use the RelativeLayout as described above, the text views themselves are being set to the right.

To correctly align numbers, it helps to use a fixed number of decimal points. In your case it looks like you might need 4 decimal places.

myTextView.setText(String.valueOf(myNumber);

Instead of that, use the String.format() method to set the number of decimal places:

myTextView.setText(String.format("%.4f", myNumber);

I was hoping to get something working with an XML Drawable that uses the stroke style, but ran into some strange issues. You might want to play around with that concept a bit.

However what I've done many times in the past is similar to what ArianJM recommends.

<View
    android:layout_width="0dp"
    android:layout_height="1px"
    android:layout_alignBaseline="@+id/tvLabel1"
    android:layout_toLeftOf="@+id/tvSizeMb1"
    android:layout_toRightOf="@+id/tvLabel1"
    android:background="#333"
    tools:ignore="PxUsage" />

Note the use of px instead of dp for the height attribute. This creates a sharper image, and by using a 1px value, the line is not very strong. You could improve this by using a slightly transparent colour for the line.

You could use a basic ListView to display your items. The list view can use a custom XML layout for each item, that aligns the text the way you want it to.

For example, here is a RelativeLayout that aligns 2 text fields in the way you want them to be aligned:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp" >

    <TextView
        android:id="@+id/tvLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="Total" />

    <TextView
        android:id="@+id/tvSizeMb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="4.57MB" />

</RelativeLayout>

Then below your list view, you would want to display your "Cache" row. Use the same layout for this, and the items will align correctly.

What about the lines between the labels and the TextViews ?

I didn't mentioned anything about divider, but I did mention the lines(or dots) between the Labels and the TextViews. I'd be really nice if I could do display something like "Total ......... $ 250"

Thank you guys! I really wished I could mark all three answers because all of them help, but since the answer provided by @Richard was the most complete, I decided to mark it as the answer

android - ListView that shows numbers with a total at the bottom - Sta...

android android-listview android-ui android-tablelayout
Rectangle 27 39

You're encountering the flex equal height columns feature.

An initial setting of a flex container is align-items: stretch.

This means that flex items automatically expand the full length of the cross axis of the container. In a row-direction container, the cross axis is vertical (height).

The tallest item sets the height for all siblings. As the tallest item expands, its siblings follow along. Hence, equal height for all items.

To override this default setting, add align-items: flex-start to the flex container:

#container_add_movies {
   display: flex;
   align-items: flex-start;
}
#container_add_movies {
  display: flex;
  align-items: flex-start;       /* NEW */
}

#container_add_movies #feedback {
  width: 20%;
  background-color: green;
  display: block;
}

#container_add_movies #search {
  width: 60%;
  background-color: red;
}

#container_add_movies #suggestions {
  width: 20%;
  background-color: yellow;
}
align-self: flex-start
#feedback {
    align-self: flex-start;
    width: 20%;
    background-color: green;
}

 #suggestions {
    align-self: flex-start; 
    width: 20%;
    background-color: yellow;
}
#container_add_movies {
  display: flex;
}

#container_add_movies #search {
  width: 60%;
  background-color: red;
}

#feedback {
  align-self: flex-start;  /* NEW */
  width: 20%;
  background-color: green;
}

#suggestions {
  align-self: flex-start;  /* NEW */
  width: 20%;
  background-color: yellow;
}
<div id='container_add_movies'>
  <div id='feedback'>Feedback</div>
  <div id='search'>
    Search<br>Search<br>Search<br>Search<br>Search<br> Search
    <br>Search<br>Search<br>Search<br>Search<br>
  </div>
  <div id='suggestions'>Suggestions</div>
</div>

align-items sets the default value of align-self. With align-self you can override the default on individual items.

8.3. Cross-axis Alignment: the align-items and align-self properties

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction.

align-items sets the default alignment for all of the flex containers items, including anonymous flex items.

align-self

Since the beginnings of CSS, there have been two layout challenges that have regularly frustrated, perplexed, and annoyed front-end developers:

Today, with the advent of flexbox, these problems are over.

In terms of equal height columns, flexbox also excels: It does this by default.

#container {
    display: flex;
    flex-direction: row;        /* not even necessary; default rule */
    align-items: stretch;       /* not even necessary; default rule */
}

The align-items: stretch rule tells flex items to expand along the cross-axis as much as possible. Hence, in a row-direction container all items can be equal height. More craziness tamed by flexbox.

Give overflow: hidden to the container and large (and equal) negative margin and positive padding to columns. Note that this method has some problems, e.g. anchor links won't work within your layout.

Now that's a hack!

html - How to disable equal height columns in Flexbox? - Stack Overflo...

html css css3 flexbox
Rectangle 27 6

$('.container').each(function(){  
     var $columns = $('.column',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.height(maxHeight);
});

The following snippet constructs an array of the heights:

$columns.map(function(){
    return $(this).height();
}).get()
Math.max.apply( Math, array )
$columns.height(maxHeight);

html - Setting equal heights for div's with jQuery - Stack Overflow

jquery html height equals
Rectangle 27 3

Set a minimum height for the .thumbnail class

.thumbnail {
    min-height: 330px;
}
.text-center {
    word-wrap: break-word;
}

worked like charm, Thanks a lot.

This don't make the same height of the box!!!

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

html - Equal height columns bootstrap 3 - Stack Overflow

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 94

Well, IMO you probably need to override the width of the columns by using CSS3 @media query.

<div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div>
@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

The value of width comes from:

width = 100% / 7 column-number = 14.285714285714285714285714285714%

Also, you could build your own 7-columns version of Twitter Bootstrap by using the Custom Builder (Changing the @grid-columns, ...).

If you are using less compiler, you could download the less version of Twitter Bootstrap (from Github) and edit the variables.less file instead.

+1 for custom builder. I needed 7-column rows for days of the week and a 12-column row for months on top of that, so I created an 84 column bootstrap and it works great. The css file is a bit larger though.

@media (max-width: 768px)
width = 100%
@media (min-width: 768px)
width = 50%

Why do you use *width with the same value of width? I thought that *width is used to set a different value for IE7 or bellow.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

html - 7 equal columns in bootstrap - Stack Overflow

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 3

You just have to use class="row-eq-height" with your class="row" to get equal height columns for previous bootstrap versions.

but with bootstrap 4 this comes natively.

I can't see class 'row-eq-height' in B4 alpha, is it there? If not, do you have any working example? Your link is based on B3, not B4.

no I mentioned that equal height column is a native property of b4..the link is for b3

row-eq-height

html - How can I make Bootstrap 4 columns all the same height? - Stack...

html css twitter-bootstrap
Rectangle 27 3

You just have to use class="row-eq-height" with your class="row" to get equal height columns for previous bootstrap versions.

but with bootstrap 4 this comes natively.

I can't see class 'row-eq-height' in B4 alpha, is it there? If not, do you have any working example? Your link is based on B3, not B4.

no I mentioned that equal height column is a native property of b4..the link is for b3

row-eq-height

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

html - How can I make Bootstrap 4 columns all the same height? - Stack...

html css twitter-bootstrap