How to set fixed auto width in tab-content bootstrap?

Question

I have a search box forms using bootstrap CSS which are included several columns based on category selection. First I would like to add all columns in same line and set auto width to them accordingly

 .col-lg-12 { width: 100%; } .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; } .col-md-6 { width: 50%; } .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; } .form-group { margin-bottom: 15px; } .tab-content { position: relative; } 

 <div class="tab-content"> <form style="margin-top:-20px" method="GET" action=""> <div class="col-xs-12 col-md-12 col-lg-12 col-sm-12 go-right"> <div class="form-group"> <img src="http://elizavetababanova.com/wp-content/uploads/2015/06/blue-number-1-md.png" style="width:30px"> </div> </div> <div class="col-xs-12 col-md-12 col-lg-12 col-sm-12"> <div class="form-group"> <img src="http://www.orangecoastcollege.edu/student_services/counseling/SiteAssets/Pages/DegreeWorks-Plan---Priority-Registration/number-2-orange-md.png" style="width:30px"> </div> </div> <div class="col-md-6 col-sm-6 col-xs-6 go-right"> <div class="form-group"> <img src="http://www.clipartbest.com/cliparts/9cz/E6X/9czE6XLRi.png" style="width:30px"> </div> </div> <div class="clearfix"></div> </form> </div> 

This is short example for my code, but there are many columns in my search box, how to set CSS that all columns will be in same line and also auto width

I want to show all columns in same line and automatically adjust sizes based on width, even if we will have more columns then it will be adjusted to the auto width. Auto set width even for each columns and also for all columns. like the images in below

For example if we will have 6 sections then auto re-size and set to width 100%

and if we will only three sections, then it will be set to width 100%

Answer 1

Well, I think there is a misunderstanding around Bootstrap CSS here.

If you want to use bootstrap, you don't have to override his rules, specially like you do.

The "col" 's classes in bootstrap are used to define how an element will be displayed on your page whatever the device.

Here's a little explanation to the class suffixes :

• The "lg" stand for "Large" (Large screen, desktops)
• The "md" stand for "Medium" (Medium devices, it can be desktops too)
• The "sm" stand for "Small" (Tablets)
• The "xs" stand for "Extra small" (Phones)
• The number stand for the space it would take on the screen (12 is the maximum)

So you don't have to override the rules , just use them correctly. For example, i've made a JSFiddle, where you can find somthing similar to what you are looking for : https://jsfiddle.net/valentinho14/etdsruy4/

And for good practices, please follow the most common ways to write this rules(it's actually the order from phones to desktop) :

<div class="col-xs-X col-sm-X col-md-X col-lg-X"></div>

If you don't need all of them, or you want to set the same size whatever the device, use to smaller rules :

<div class="col-xs-6"></div>
<!-- it will take 50% of the screen on Phones, Tablets and desktop

To have more informations about this, please check the official bootstrap doc, it will explain you all the details of the grid system : http://getbootstrap.com/css/#grid

UPDATE
Here a solution when you have 7 columns. Actually, Bootstrap does not provide native way to handle this kind of situation(5 columns, 7 columns) : https://jsfiddle.net/valentinho14/hgxtt2bn/

This was inspired by this answer : https://stackoverflow.com/a/21955398/4673732

Answer 2

you to specify how meny "columns" each one of your columns will have.

you have a maximun of 12 columns per line with bootstrap.

on each div you can specify how many columns it will ocupy

<div class="col-xs-6 col-md-4 col-lg-3"></div>

in that example, when the width is extra small, the column will ocupy half the window, when the size is medium, a third, and if it's large... 1/4

http://getbootstrap.com/css/#grid

there you can find more documentation. I hope it helps