user6276867 - 1 year ago 64
jQuery Question

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

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">
</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%

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