Bootstrap grid, get less than col -xx-1 - html

Question

Using Bootstrap and have row which consist of 4 <div>. I need to column which is more them col-xx-1 and less than col-xx-2. How can I set half of col-xx-2 and rest space pass to next div?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-2">
THIS ONE I NEED TO SET "COL-SM-1.5" to give more space for next div
</div>
<div class="col-sm-5">
third text here
</div>
<div class="col-sm-1">
forth text here
</div>
<div class="col-sm-1">
forth text here
</div>
</div>
</div>
</div>

Answer 1

I think you have to create sub columns.
So
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-7"> // Extend the length to combine the two rows
<div class="col-sm-4"> // Gives 1/3 of the 8 length column
THIS ONE IS "COL-SM-1.5ish"
</div>
<div class="col-sm-8"> // Gives 2/3 of the 8 length column.
</div>
</div>
...
I combined the 2 columns together to make it col-sm-7, then did subcolumns within there, that give you more room to work with inside the main column. You can adjust accordingly from there.
Sorry i cant give you a 100% correct answer, i usually just browse for answers, hopefully this helps or guides you in the correct direction.

Answer 2

You can define your own classes on top of bootstrap
Bootstrap uses a 12 column grid. Your total columns need to equal 12. You had 3+2+5+1+1 = 12 originally. Now its 3+1.5+5.5+1+1 = 12
I have converted your original col-sm to col-xs instead, since its easier to read on stackoverflow. The principle is the same
[class*=col]{
box-sizing: border-box;
border: 1px solid black;
}
.col-xs-15,
.col-xs-55 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/*e.g. change this min-width depending on if you are using col-md, col-lg, etc*/
/*e.g. col-sm set min-width to 768px;*/
#media (min-width: 1px){
.col-xs-15,
.col-xs-55{
float: left;
}
.col-xs-15 {
width: 12.5%;
}
.col-xs-55 {
width: 45.8333333333%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjxsfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- your original file, I fixed errors you had here (you forgot to specify one row)-->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
first text here
</div>
<div class="col-xs-2">
THIS ONE I NEED TO SET "COL-xs-1.5" to give more space for next div
</div>
<div class="col-xs-5">
third text here
</div>
<div class="col-xs-1">
forth text here
</div>
<div class="col-xs-1">
forth text here
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!-- With changes -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
first text here
</div>
<div class="col-xs-15">
THIS ONE I NEED TO SET "COL-xs-1.5" to give more space for next div
</div>
<div class="col-xs-55">
third text here
</div>
<div class="col-xs-1">
forth text here
</div>
<div class="col-xs-1">
forth text here
</div>
</div>
</div>
</div>
</div>
I suggest looking at the bootstrap source code to implement your own classes as well
https://github.com/twbs/bootstrap/blob/v3.4.0-dev/dist/css/bootstrap.css

Answer 3

Simple by giving additional custom class and add it to your media-query
.custom-width{
width:15% !important;
}
Adjust your width in such a way so that it won't overflow your row
.col-sm-2,
.col-sm-3,
.col-sm-5,
.col-sm-1 {
border: 1px solid;
}
#media only screen and (min-width: 768px) {
/* Styles */
.custom-width {
width: 15% !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-2 custom-width">
THIS ONE I NEED TO SET "COL-SM-1.5" to give more space for next div
</div>
<div class="col-sm-5">
third text here
</div>
<div class="col-sm-1">
forth text here
</div>
<div class="col-sm-1">
forth text here
</div>
</div>
</div>
</div>