I need to make a responsive grid which doesn't lose its grid count (should be 6x4 even) when using a small screen and should cover the full screen and looks something like the image below.
I didn't find anything similar to this online, I am not an UI expert, any help will be appreciated, how should one do this? bootstrap grid or table?
I will be using this grid as a overlay to our website to listen to swipe actions.
You can simply do it using bootstrap grid system.
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.col-xs-2 {
border:3px solid grey;
height: 50px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class= "row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
</div>
<div class= "row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
</div>
<div class= "row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
</div>
<div class= "row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
</div>
</div>
</body>
</html>
Related
My code for this is :
<!-- page content -->
<div class="right_col" role="main">
<c:if test="${not empty menuStructure.menus}">
<div class="row">
<c:forEach var="menu" items="${menuStructure.menus}"
varStatus="menuCounter">
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="x_panel tile">
<div class="x_title">
<span style="font-size: 25px; color: #73879C !important; font-
weight:bold; font-size:1.0vw; margin-top:15px; font-weight:
400;">${menu.label}</span>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up">
</i></a>
</li> </ul>
<div class="clearfix"></div>
</div>
<div class="x_content" align="center" >
<a href="${menu.link}"><img
src="${contextPath}/resources/images/${menu.thumbnail}"
alt=""></a>
</div>
</div>
</div>
</c:forEach>
</div>
</c:if>
</div>
<!-- /page content -->
I know that the issue is that all menu tabs are contained in bootstrap class class="row" that's why when last tab of first row is collapsed that space is reclaimed by the tabs below it, but I'm unable to find a solution for this.
Any help will be appreciated. Thanks.
You need to change your structure a bit, like
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
means 12 columns should be in single row, so you wont get above issue
You can use nth-child in css as
.right_col .col-md-3:nth-child(n+4){
clear: both;
}
function alignGrid(){
$(".sp-custom").remove();
var width=$(".row").width()-30;
var temp=0;
$(".row .grid-custom").each(function(index, item) {
temp=temp+$(item).width();
if((width-temp)<$(item).width()){
$(item).after('<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 sp-custom"></div>');
temp=0;
}
});
}
alignGrid();
$( window ).resize(function() {
alignGrid();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:grey;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:green;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:lightgrey;height:40px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:yellow;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:red;height:80px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:blue;height:10px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:cyan;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:lightblue;height:70px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:black;height:70px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:brown;height:100px;">
</div>
</div>
</div>
You can try the above javascript code.
This code will insert div as a separator after the last div in a row.
This question already has answers here:
Bootstrap 4.0 Grid System Layout not working
(1 answer)
bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]
(3 answers)
Closed 4 years ago.
I have two columns, col-4 and col-8 inside col-12 and row. But the two columns are not in the same row. I am not able to understand why this is happening even when I am not writing any CSS just the bootstrap grid.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
<div class="row" id="first_row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/nahid.jpg" class="img-fluid" alt="Responsive image" id="avater_main">
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
</div>
</div>
</div>
The additional parent container of 12 grid is not needed.
The div which is required to remove
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
Also, attached working demo with snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row" id="first_row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/nahid.jpg" class="img-fluid" alt="Responsive image" id="avater_main">
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
</div>
</div>
</div>
Every column needs a row parent in Bootstrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row" id="first_row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- Row added here. -->
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="//placehold.it/64x64" class="img-fluid" alt="Responsive image" id="avater_main">
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<!-- And a row here. -->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am following the 12 column rule, the following code is for right panel section having width of 8 column.remaining is 4 column panel on left side. It shows well on more than 1300 pixels resolution, but when shrink then the all controls in right panel overlapped. Any Advice ?
<div class="financeScreenRightBlock">
<div class="form-group row ">
<label class="col-md-3 control-label">Retail Price</label>
<div class="col-md-3 ">
<wj-input-number id="retailPrice" style="border-color: red" [placeholder]="'Retail Price'" [isRequired]="true" [(value)]="application.finance.assetCost.retailPrice" (lostFocus)="retailPrice_Focus();getAmtFin_CalculatePayment()">
</wj-input-number>
</div>
<div class="col-md-3 control-label">
<label>Trade In</label>
</div>
<div class="col-md-2 text-right">
<wj-input-number id="retailPrice" [placeholder]="'DepositAmount'" [(value)]="application.finance.assetCost.tradeInDepositAmount" [isReadOnly]="true">
</wj-input-number>
</div>
<div class="col-md-1 text-right">
<button (click)="tradeInWin()" class="btn" style=" padding: 4px 8px;border-radius: 100px;">...</button>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 control-label">Delivery Charges</label>
<div class="col-md-3 ">
<wj-input-number id="deliveryCharges" [placeholder]="'Delivery Charges'" [(value)]="application.finance.assetCost.deliveryAmount" (lostFocus)="getAmtFin_CalculatePayment()">
</wj-input-number>
</div>
<label class="col-md-3 control-label">Deposit</label>
<div class="col-md-3">
<wj-input-number id="deposit" [placeholder]="'Deposit'" [(value)]="application.finance.assetCost.cashDepositAmount" (lostFocus)="totalDepositCalculate()">
</wj-input-number>
</div>
</div>
<div class="form-group row">
<div class="col-md-3 control-label">
<label>Accessories</label>
</div>
<div class="col-md-2 text-right">
<wj-input-number id="accessories" [placeholder]="'Accessories'" [(value)]="application.finance.assetCost.totalAccessoryAmount" [isReadOnly]="true">
</wj-input-number>
</div>
<div class="col-md-1 text-right">
<button class="btn" (click)="accessoriesWin()" style=" padding: 4px 8px;border-radius: 100px;">...</button>
</div>
<div class="col-md-3 control-label">
<label>Total Deposit</label>
</div>
<div class="col-md-3">
<wj-input-number id="totalDeposit" [placeholder]="'Total Deposit'" [(value)]="application.finance.assetCost.totalDepositAmount" [isReadOnly]="true">
</wj-input-number>
</div>
</div>
<div class="form-group row">
<div class="col-md-3 control-label custom-checkbox">
<input type="checkbox" id="onroad" name="onroad" [(ngModel)]="application.finance.onRoadCostInclusionIndicator" (ngModelChange)="getAmtFin_CalculatePayment()" />
<label for="onroad">On Roads</label>
</div>
<div class="col-md-2 text-right">
<wj-input-number [placeholder]="'Interest Rate'" [isRequired]="true" [isReadOnly]="true" (lostFocus)="interestRate_Focus()" [value]="((application.finance.onRoadCostInclusionIndicator)?(application.finance.assetCost.registrationAmount*1+application.finance.financeContract.financeTax.stampDutyAmount*1):0)">
</wj-input-number>
</div>
<div class="col-md-1 text-right">
<button class="btn" (click)="onRoadWin()" style=" padding: 4px 8px;border-radius: 100px;">...</button>
</div>
<div class="col-md-3 control-label custom-checkbox">
<input type="checkbox" id="feebox" name="feebox" [(ngModel)]="application.fee.showIndicator" (ngModelChange)="getFeeCheckbox()" />
<label for="feebox">Fee</label>
</div>
<div class="col-md-2 text-right">
<wj-input-number id="fee" [placeholder]="'fee'" [(value)]="application.fee.totalFeeAmount" [isReadOnly]="true">
</wj-input-number>
</div>
<div class="col-md-1 text-right">
<button (click)="feeWin()" class="btn" style=" padding: 4px 8px;border-radius: 100px;">...</button>
</div>
</div>
<div class="form-group row">
<div class="col-md-3 control-label custom-checkbox">
<input type="checkbox" id="insuranceCheckbox" name="insuranceCheckbox" [(ngModel)]="application.finance.financeContract.financeInsurance.showIndicator" (ngModelChange)="getAmtFin_CalculatePayment()" />
<label for="insuranceCheckbox">Insurance</label>
</div>
<div class="col-md-2 text-right">
<wj-input-number [placeholder]="'Insurance'" [isRequired]="true" [isReadOnly]="true" (lostFocus)="interestRate_Focus()" [value]="((application.finance.financeContract.financeInsurance.showIndicator)?application.finance.financeContract.totalFinancePremiumAmount:0)">
</wj-input-number>
</div>
<div class="col-md-1 text-right">
<button (click)="insuranceWin_close();insuranceWin();" class="btn" style=" padding: 4px 8px;border-radius: 100px;">...
</button>
</div>
<div class="col-md-3 control-label custom-checkbox">
<label for="feebox">Amount Financed</label>
</div>
<div class="col-md-3 text-right">
<wj-input-number [placeholder]="'Amount Financed'" [isRequired]="true" [isReadOnly]="true" [(value)]="application.finance.financeContract.financedAmount">
</wj-input-number>
</div>
</div>
</div>
You can add more css classes to your divs in order to achieve the desired look/behaviour. You can use chrome developer tools to see how your page looks on smaller devices. I usually creating a skeleton for my page for mobile devices first and then moving on to setup the layout for tablets etc.
example
col-xs-2 col-md-4 col-lg-6 can be on the same class definition.
hope that helps.
This is happening because you are using col-md-x that is you are using medium sized columns. For complete responsiveness you should use col-md-x for medium sized screens, col-lg-x for large screen sizes and col-sm-x for smaller screens. For eg. if you want your page to be properly displayed in a tab you should use col-md-x and col-lg-x for laptop screens.
Also, I think it is better to nest your divs properly. You are saying you have one 4 column panel and one 8 column panel. So, for example your code should look like this.
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<!---Do your stuff here-->
</div>
<div class="col-sm-8 col-md-8 col-lg-8">
<!--you can do further nesting here-->
<!--example-->
<div class="col-sm-4 col-md-4 col-lg-4">
<p>some more code goes here</p>
</div>
<div class="col-sm-7 col-sm-offset-1 col-md-7 col-md-offset-1 col-lg-7 col-lg-offset-1">
<p>above div shows how to give blank columns if you want your page to have some blank spaces between columns. use col-sm/md/lg-offset-x for this.</p>
</div>
</div>
</div>
I understand you are using angular-ui bootstrap and the above example is for twitter-bootstrap. Keeping that in mind, I thought a nesting div example will be helpful to you. Cheers!
I'm finding it very difficult achieving an L shaped category section with featured ads placed beside the featured ad. I'm using bootstrap because of the responsive nature, its the only option I know.
Please heres SAMPLE IMAGE of what I'm trying to achieve.
Also these are my lines of codes:
<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-car fa-5x" style="background-color: #6fbf4e;"></i><br> <center>CARS</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-television fa-5x" style="background-color: #556266;"></i><br> <center>ELECTRONICS</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-headphones fa-5x" style="background-color: #eb686e;"></i><br> <center>ENTERTAINMENT</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-briefcase fa-5x" style="background-color: #4a8c9c;"></i><br><center>JOBS</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-home fa-5x" style="background-color: #1693eb;"></i><br> <center>REAL ESTATE</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-cutlery fa-5x" style="background-color: #fc011f;"></i><br> <center>RESTAURANTS</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-graduation-cap fa-5x" style="background-color: #6fbf4e;"></i><br> <center>EDUCATION</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-wrench fa-5x" style="background-color: #556266;"></i><br> <center>SERVICES</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-calendar fa-5x" style="background-color: #eb686e;"></i><br> <center>EVENTS</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-female fa-5x" style="background-color: #4a8c9c;"></i><br><center>FASHION</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-paw fa-5x" style="background-color: #1693eb;"></i><br> <center>ANIMALS & PETS</div>
<div class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-plus-circle fa-5x" style="background-color: #fc011f;"></i><br> <center>MORE</div>
</div>
</div>
<div><img class="featured" src="images/Featured-Ad.jpg" ></div>
Please I need help guys, I've been trying to achieve this for too long now but I'm getting nowhere. Thanks
Instead of adding rows in between your categories just have one row and then add your columns inside that row. So add your featured section first then your categories should fall into place. Like so:
Here is a fiddle with some random css and the following markup Fiddle Demo
<div class="container">
<div class="row">
<div class="col-xs-8 col-md-6 featured-section">
<a class="featured" href="#"></a>
</div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
<div class="col-xs-4 col-md-2 category"></div>
</div>
</div>
I have to organize a quite common (I suppose) layout for my web app (AngularJS + Bootstrap).
The (responsive) layout is made up by a table of rows; this way, more or less:
------------------------------------------------ row 1 ---
| pho- | description |
| to | button1 button2 button3 button4 button5 button6 |
----------------------------------------------------------
...
------------------------------------------------ row N ---
| pho- | description |
| to | button1 button2 button3 button4 button5 button6 |
----------------------------------------------------------
This is the markup I've come up with:
<div class="container">
<div class="row" ng-repeat="(id, person) in persons">
<div class="col-xs-4 col-sm-3 col-md-2 col-lg-2">
<img ng-src="{{person.photo_src}}" />
</div>
<div class="col-xs-8 col-sm-9 col-md-9 col-lg-9">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div>
{{person.description}}
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn">
button1
</button>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn">
button2
</button>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn">
button3
</button>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn">
button4
</button>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn">
button5
</button>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn">
button6
</button>
</div>
</div>
</div>
</div>
</div>
I'm not satisfied with the results, as you can see... :-(
#1200px width:
#360px width:
(the last button can be present or not...).
I would like to split the buttons on two different rows, at widths below 640 (for example), but I can't figure out how to get there... I've never fully grasped Bootstrap's layout logic... :-(
Any graphical/layout improvement suggestion would be kindly accepted, too... :-)
I think you should use the 12 column concept of bootstrap.
You should divide the column in that way, where the row is divided in 12 column.
For smaller screens you can use the col-xs
I hope to solve the responsive problem above mentioned by you can be solved by the given code.
<div class="container">
<div class="row" ng-repeat="(id, person) in persons">
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-3">
<img ng-src="{{person.photo_src}}" />
</div>
<div class="col-xs-8 col-sm-9 col-md-9 col-lg-9">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div>
{{person.description}}
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn">
button1
</button>
</div>
<div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn">
button2
</button>
</div>
<div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn">
button3
</button>
</div>
<div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn">
button4
</button>
</div>
<div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn">
button5
</button>
</div>
<div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn">
button6
</button>
</div>
</div>
</div>
</div>
</div>
Here's a grid layout that might work for you..
<div class="container">
<div class="row" ng-repeat="(id, person) in persons">
<div class="col-xs-12 col-sm-3 col-md-2">
<img src="http://placehold.it/100" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-9 col-md-9">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div>
person.description
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-2">
<button type="button" class="btn">
button
</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-2">
<button type="button" class="btn">
button
</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-2">
<button type="button" class="btn">
button
</button>
</div>
<div class="clearfix visible-sm visible-xs"> </div>
<div class="col-xs-4 col-sm-4 col-md-2">
<button type="button" class="btn">
button
</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-2">
<button type="button" class="btn">
button
</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-2">
<button type="button" class="btn">
button
</button>
</div>
</div>
</div>
</div>
</div>
Demo: http://codeply.com/go/XWGksepx3h
Also note, there is no row-fluid in Bootstrap 3, and you only need to specify class for the smallest viewport you want to support. Therefore the col-lg-* aren't needed since col-md-* will be used for col-md-* and col-ld-*.
You may try to add this line to your css's:
#media (max-width: 640px) {
.col-sm-2 {
width:33.33333333333331%;
}
}
FIDDLE