Rowspan and heigth top column in bootstrap - html

How can I do in bootstrap such a grid:
<table border=1>
<tr>
<td style="height: 30px">aaaa</td><td rowspan="2">bbbb</td>
</tr>
<tr>
<td style="font-size: 9px">cccccccc</td>
</tr>
</table>
https://jsfiddle.net/68anykfe/1/
Is this possible?
I tried:
<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-lg-12" style="height: 60px">aaaaa</div>
</div>
<div class="row">
<div class="col-lg-12">ccccc</div>
</div>
</div>
<div class="col-lg-3">
bbbbb
</div>
</div>
</div>
In this example i would like "bbbbbb" have aligned to bottom.


I think this is what you are asking for? https://jsfiddle.net/eye4ytq2/8/
<div class="col-xs-2 border">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 border" style="height: 60px">aaaaa</div>
<div class="col-xs-12 border">ccccc</div>
</div>
</div>
<div class="col-xs-6 border" style="height: 81px">
bbbbb
</div>
</div>
</div>

Related

Center columns across table row

I'm trying to center my columns across the page. I'm instead stacking rows on top of each other.
Here is my code:
<tr>
<td colspan="2" style="padding-left: 25px; padding-right: 25px;">
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col-" style="font-weight:bold;">
Total Open
</div>
</div>
<div class="row">
<div class="col" id="TotalOpen">
1
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col" style="font-weight:bold;">
Total Unassigned
</div>
</div>
<div class="row">
<div class="col" id="TotalUnassigned">
2
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col" style="font-weight:bold;">
LSA Unassigned
</div>
</div>
<div class="row">
<div class="col" id="LSAUnassigned">
3
</div>
<button id="LSAUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>
<div class="col">
<div class="row">
<div class="col" style="font-weight:bold;">
LS Unassigned
</div>
</div>
<div class="row">
<div class="col" id="LSUnassigned">
4
</div>
<button id="LSUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>
<div class="col">
<div class="row">
<div class="col-lg-12" style="font-weight:bold;">
SLO Unassigned
</div>
</div>
<div class="row">
<div class="col" id="SLOUnassigned">
5
</div>
<button id="SLOUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>
<div class="col">
<div class="row">
<div class="col" style="font-weight:bold;">
ATTY Unassigned
</div>
</div>
<div class="row">
<div class="col" id="ATTYUnassigned">
6
</div>
<button id="ATTYUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>
</div>
</div>
</td>
</tr>
Which looks like this:
stacked columns
I'd like it to look like this:
goal
I'm using .cshtml and Bootstrap to try and accomplish this.
I'm not very good at HTML and I don't understand why columns are stacking vertically instead of horizontally.
I apologize for my terrible MS Paint skills.

If you using a bootstrap 4, use a structure row like this.
If you added a more <div> code will got block element.
So let's try like this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-md-2 col-sm-2">
<div style="font-weight:bold;">
Total Open
</div>
<div id="TotalOpen">
1
</div>
</div>
<div class="col-md-2 col-sm-2">
<div style="font-weight:bold;">
Total Unassigned
</div>
<div id="TotalUnassigned">
2
</div>
</div>
<div class="col-md-2 col-sm-2">
<div style="font-weight:bold;">
LSA Unassigned
</div>
<div id="LSAUnassigned">
3
</div>
<button id="LSAUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>

Element goes outside parrent

I'm having a little problem with my CSS.
If you run the fiddle (had to use fiddle because of StackOverflow body limit), and look at the grey background of CASES.
Then you can see that all the content of Cases is nicely inside it the grey area. But if you click on Casefamily then you will notice that the Casefamily goes outside the grey area. This covers parts of my documentation section.
How can I make the "grey" area expand to its content?
<div id="pvCases_d30dcf2a">
<div class="Cases_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="Controllers_d30dcf2a">
<input class="search_d30dcf2a" placeholder="Search..">
<div class="catchWordContainer_d30dcf2a">
<input class="catchWord_d30dcf2a" placeholder="Catchword">
<div class="catchWordSuggestion_d30dcf2a"></div>
</div>
<div class="dropdown_d30dcf2a">
<div class="selected_d30dcf2a">
<span> Applicant/Proprietor</span><i class="fa fa-caret-down"></i>
</div>
<div class="options_d30dcf2a" style="display: none;">
</div>
</div>
<div class="rightContainer_d30dcf2a">
<button type="button" id="SaveSearchResult">Save</button>
<div class="SearchCollection_d30dcf2a">
<div class="selected_d30dcf2a">
<span> </span><i class="fa fa-caret-down"></i>
</div>
<div class="SearchCollectionOptions_d30dcf2a">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="CaseTable_d30dcf2a">
<table class="table table-striped">
<thead>
<tr>
<th><span>Case Title</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Case Number</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Status</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Case Type</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Family</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Country</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Catchword</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Applicant/Proprietor</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Inventor</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Description</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Classes</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Appl. Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Reg Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Abandoned Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="option_container_d30dcf2a">
<i class="fa fa-cog cog_d30dcf2a"></i>
<div class="cog_options_d30dcf2a">
<div class="row"></div>
<button class="SettingTableOptions_d30dcf2a">Save</button>
</div>
</th>
</tr>
</thead>
<tbody>
<tr data-content="{"Id":1,"Title":"Feed for salmonids","Case_Number":"P47931PC01","Status":"Filed","Case_Type":"Parent","Family":"Test","Country":"Denmark","Catchword":"Web","Applicant_x002f_Proprietor":"P47931PC01","Inventor":"Konfab","Description":"<div class=\"ExternalClass4AF54D6F770C4D72987907C1A07DEA48\"><p>​Something<br><br></p></div>","Classes":"dunno","Appl_x002e_Date":"2018-06-21T22:00:00Z","RegDate":"2018-06-21T22:00:00Z","Abandoneddate":null,"Picture":null,"ID":1}">
<td>Feed for salmonids</td>
<td>P47931PC01</td>
<td>Filed</td>
<td class="defaultHidden_d30dcf2a">Parent</td>
<td class="defaultHidden_d30dcf2a">Test</td>
<td class="defaultHidden_d30dcf2a">Denmark</td>
<td>Web</td>
<td>P47931PC01</td>
<td class="defaultHidden_d30dcf2a">Konfab</td>
<td class="defaultHidden_d30dcf2a">
<div class="ExternalClass4AF54D6F770C4D72987907C1A07DEA48">
<p>​Something<br><br></p>
</div>
</td>
<td class="defaultHidden_d30dcf2a">dunno</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">null</td>
<td></td>
</tr>
<tr data-content="{"Id":2,"Title":"case test","Case_Number":"P47931PC02","Status":"Filed","Case_Type":"Parent","Family":"Test","Country":"Denmark","Catchword":"Web","Applicant_x002f_Proprietor":"P47931PC02","Inventor":"Konfab","Description":"<div class=\"ExternalClass3E913664A3344C909C30924BD9212012\"><p>​Something​<br></p></div>","Classes":"dunno","Appl_x002e_Date":"2018-06-21T22:00:00Z","RegDate":"2018-06-21T22:00:00Z","Abandoneddate":null,"Picture":null,"ID":2}">
<td>case test</td>
<td>P47931PC02</td>
<td>Filed</td>
<td class="defaultHidden_d30dcf2a">Parent</td>
<td class="defaultHidden_d30dcf2a">Test</td>
<td class="defaultHidden_d30dcf2a">Denmark</td>
<td>Web</td>
<td>P47931PC02</td>
<td class="defaultHidden_d30dcf2a">Konfab</td>
<td class="defaultHidden_d30dcf2a">
<div class="ExternalClass3E913664A3344C909C30924BD9212012">
<p>​Something​<br></p>
</div>
</td>
<td class="defaultHidden_d30dcf2a">dunno</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">null</td>
<td></td>
</tr>
</tbody>
</table>
<button type="button" class="download_xlsx_d30dcf2a">download as xlsx</button>
</div>
</div>
</div>
</div>
<div class="CaseDetails_d30dcf2a" style="display: block;">
<div class="return_d30dcf2a">
<span> Cases / </span><span>Feed for salmonids</span>
</div>
<div class="CaseDetailContainer_d30dcf2a">
<ul class="tabs_d30dcf2a group">
<li><a class="active_d30dcf2a">Case details</a></li>
<li><a class="">Casefamily</a></li>
</ul>
<div class="box_wrap_d30dcf2a">
<div class="active_d30dcf2a">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Case Number</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">P47931PC01</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Status</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Filed</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Type</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Parent</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Family</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Test</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Country</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Denmark</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Title</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Feed for salmonids</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Applicant/Proprietor</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">P47931PC01</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Inventor</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Konfab</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Description</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">​Something</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Classes</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">dunno</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Appl. date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">21-06-2018</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Reg. Date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">21-06-2018</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Next Renewal</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Abandoned date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Division (subdivision)</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
</div>
</div>
<div class="col-md-3">
<img>
</div>
</div>
</div>
<div class="Casefamily_d30dcf2a">
<table class="table">
<thead>
<tr>
<th>
Case No
</th>
<th>
Name
</th>
<th>
Applicant/Proprietor
</th>
<th>
Appl. date
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr class="status_d30dcf2a Filled_d30dcf2a">
<td>
T62039EU02
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Filed
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU03
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Pending_d30dcf2a">
<td>
T62039EU04
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Pending
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU05
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU06
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU07
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

replace position: absolute with position: relative, it will expand parent element
#pvCases_d30dcf2a .CaseDetails_d30dcf2a .CaseDetailContainer_d30dcf2a .box_wrap_d30dcf2a>div {
position: relative;
}

Hello Peter it doesn't respect the parent because it is a table, and tables are not responsive. The best solution is to make the parent div to have a CSS attribute of overflow-x : scroll, to enable people to view all the content and to contain you content.
#pvCases_d30dcf2a .CaseDetails_d30dcf2a .CaseDetailContainer_d30dcf2a
.box_wrap_d30dcf2a>div{
overflow-x : scroll;
}

how to align columns vertically so that adjacent rows not align with each other

How can I align the td vertically so that it looks like below and the text box will be next to the "aaaa:" and aligned with it horizontally as well?
https://jsfiddle.net/rgw870ta/
enter code here

Please check the following code and its output, I'm a bit confused what you actually want but I guess one of following will help you!
<table style="width: 100%;display:table-cell;" border="0">
<tr valign="top" >
<td style="width: 50px" align="right">And<br /> And</td>
<td style="display:block; margin-left:10px; margin-bottom:70px">
aaaaaaaaaaaaaaaaaaaaa:
<br />
bbbbbbbbbbbbbbbbbb
<br />
cccccccccccccccccccc
</td>
<td>
<table border="0">
<tr>
<td>
<input type="text" name="lname">
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<br>
<div style="display: flex;align-items: center;
">
<div style="width: 50px" align="right">And<br /> And</div>
<div style="display:block; margin-left:20px;">
aaaaaaaaaaaaaaaaaaaaa:
<br />
bbbbbbbbbbbbbbbbbb
<br />
cccccccccccccccccccc
</div>
<div>
<input type="text" name="lname">
</div>
</div>

Try this
<table style="width: 70%" border="0">
<tr valign="top" >
<td style="width:10px">And<br /> And</td>
<td style="width:20px;text-align:left; ">
aaaaaaaaaaaaaaaaaaaaa:
<br />
bbbbbbbbbbbbbbbbbb
<br />
cccccccccccccccccccc
</td>
<td style="width:70px;text-align:left;">
<input type="text" name="lname">
</td>
</tr>
</table>

Try this and see if that's what you're after... I think you missed the div with class container wrapping all the rows.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row top-buffer">
<div class="col-md-12">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA:</div>
</div>
<div class="row no-margin">
<div class="col-md-2"></div>
<div class="col-md-5 ">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB:</div>
<input style="margin-top:-5px" type="text" />
</div>
<div class="row no-margin">
<div class="col-md-2 text-right">And</div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
<div class="row no-margin">
<div class="col-md-2"></div>
<div class="col-md-5">CCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
</div>
<div class="row no-margin">
<div class="col-6 col-md-2 text-right">And</div>
<div class="col-6 col-md-2"></div>
<div class="col-6 col-md-2"></div>
</div>
<div class="row no-margin">
<div class="col-md-2"></div>
<div class="col-md-4">DDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
</div>
</div>

i assume this is what you need:
<div class="container">
<div class="row">
<div class="col-sm-4">
<label>A</label>
</div>
<div class="col-sm-4 col-xs-4">
<div class="col-xs-2">
<input type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label>A </label>
</div>
<div class="col-sm-4 col-xs-4 ">
<div class="col-xs-2">
<input type="text">
</div>
</div>
</div>
</div>
resize the uotput window check:
https://jsfiddle.net/3q3egbqs/

Bootstrap CSS Tile Grid

I am repeating some kind of tiles in a div with class row. It looks like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
It should look like this: IMAGE
Which basically means that no matter what display size it should always show as many tiles as possible in one row. Currently this does not work on a mobile device for example. Anyone know to fix it?

Is this what you were looking for?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
<div class="ccol-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
</div>

How to keep image size correct in different resolutions, in Bootstrap?

I am working on a website, in which I need to create four columns of equal width. On top of columns, I need to place an image. Following is my code:
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="row" style="margin-bottom:30px;">
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/one.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">First column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/two.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Second column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/three.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Third column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/four.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Fourth column title</div>
</div>
</div>
</div>
</div>
<div class="col-xs-1"></div>
</div>
How can I place an image properly above column, image width equal to column width, without creating multiple size images?

Please find the code that works. I just added "img-responsive" class that is bootstrap in build class to all the image tags.
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="row" style="margin-bottom:30px;">
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/one.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">First column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/two.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Second column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/three.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Third column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/four.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Fourth column title</div>
</div>
</div>
</div>
</div>
<div class="col-xs-1"></div>
</div>