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>
Related
I'm trying to prevent my group of three icons from collapsing to a vertical state, currently they are align horizontally, the problem is when i adjust the screen to a smaller one, the icons will readjust as well when my screen reaches a certain size
<div class="">
<div class="list-item">
<section class="row">
<vehicleHeading [vehicleItem]="vehicleItem" class="col-md-10 col-sm-9 col-xs-8 nopadding"></vehicleHeading>
<div class="icon-group col-md-2 col-sm-3 col-xs-4">
<span class="pull-right">
<i [id]="mapId" (click)="showVehicleOnMap()" class="material-pin pointer nopaddingLeft"></i>
<span [id]="collapseId" (click)="showVehicleDetails()"><i class="material-list pointer"></i></span>
<collapsibleImage [id]="detailsId" (collapseEvent)="onToggleClick($event)"></collapsibleImage>
</span>
</div>
</section>
</div>
<div [collapse]="isCollapsed" class="panel-body topBorder">
<div class="row">
<div class="col-sm-6 col-md-7 col-lg-7">
<div class="form form-horizontal hidden">
<div class="form-group">
<div class="col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-sm-5 col-md-5 col-lg-5"></div>
<div class="col-sm-5 col-md-5 col-lg-5">
<div class="pull-right">
<i class="viewMore">Details</i>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-5 col-lg-5 nopadding">
<div class="pull-right thumbnail">
<vehicleMap id="vehicleMapId" #mapDetails [VehicleDetails]="vehicleItem"></vehicleMap>
</div>
</div>
</div>
</div>
</div>
I'm using bootstrap's collapsible functionality to have a list of stores with expandable information.
The problem is, when I open one of the collapsibles on the left hand column, it pushes some items into the next column. If I open a collapsible on the right hand column, everything slides properly, but it also adds a space on the left hand column. Please see the following plunker. Resize the screen until there are two rows of collapsibles and then click on one in each row to see the two behaviours:
http://plnkr.co/edit/2SLCQQJetyvM34mrCsHj?p=preview
This is the code I am using:
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
{{x.name}}
</a>
</h4>
</div>
<div id="{{removeSpaces(x.name, false)}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-sm-12 col-md-6 col-lg-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
My desired result is to have the collapsible only slide the column that it lives in, and that items do not move onto the next row. Is this possible with Bootstrap's grid system?
Actually there's one simple solution to this if you want it.
Just put <div style="clear:both"></div> after every two col-xs-12 divs. And it will stop pushing the elements after it to the right.
You can see the example here.
Note: Remember, put clear div after every N collapsible div (it should be the same as the column number)
Try to use two separated columns for your panels. Something like this:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-1">
xname-1
</a>
</h4>
</div>
<div id="xname-1" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-2">
xname-2
</a>
</h4>
</div>
<div id="xname-2" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-3">
xname-3
</a>
</h4>
</div>
<div id="xname-3" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-4">
xname-4
</a>
</h4>
</div>
<div id="xname-4" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-5">
xname-5
</a>
</h4>
</div>
<div id="xname-5" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-6">
xname-6
</a>
</h4>
</div>
<div id="xname-6" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
UPD. I've improved my Plinker. Now there are no superfluous repetitions in it. But I must warn you that I do not know Angular well.
http://plnkr.co/edit/Hj0NF9Vb5ydNIrXLOwPT?p=preview
<body ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6" ng-repeat="column in [0,1]">
<div class="panel-group col-xs-12 stores-container" ng-repeat="x in storeList" ng-if="$index >= ( $parent.$index * storeList.length / 2 ) && $index < ( ( $parent.$index + 1 ) * storeList.length / 2 )">
<div class="panel panel-default store-wrapper">
<div class="panel-heading" data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
<h4 class="panel-title">
<a>
{{x.name}}
</a>
</h4>
</div>
<div id="{{removeSpaces(x.name, false)}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
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>
I'm trying to achieve the setup illustrated below with Bootstrap 3, but I can't quite find a way to do it, especially to keep it responsive. I looked at panels and tables, etc. but then tend to not have really worked out great so far.
I figured it out in the end. Just took a bit of messing around with rows within the panels.
<div class="panel-group" id="accordion" role="tablist">
<div class="panel panel-default container-fluid">
<div class="row panel-heading ">
<div class="col-sm-1 pull-left"></div>
<div class="col-sm-4 col-xs-12">Asset ID</div>
<div class="col-sm-2 col-xs-12">Status</div>
<div class="col-sm-2 col-xs-12">Asset Nodes</div>
<div class="col-sm-3 col-xs-12">Manage</div>
</div>
</div>
<div class="panel panel-default container-fluid">
<div class="panel-heading row" role="tab" id="headingOne">
<div class="col-xs-1">
<div data-toggle="collapse" class="handpointer glyphicon glyphicon-chevron-right"></div>
</div>
<div class="col-sm-4 col-xs-12">
xxx
</div>
<div class="col-sm-2 col-xs-12">Normal</div>
<div class="col-sm-2 col-xs-12">?</div>
<div class="col-sm-3 col-xs-12"><a class="btn btn-xs btn-default" href="#" role="button">button</a></div>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
dsfsdfd
</div>
</div>
</div>
</div>
http://www.bootply.com/NLxmcWu4SJ
I am trying to display the text in the info box on the same line but for some reason each word is on a new line. So that it displays as 'Problems Encountered' one line. I have tried text-align: left.
Here is the view code:
<div class="panel-body">
<a href="~/Employee/Index">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box blue-bg">
<i class="fa fa-user"></i>
<div class="count" style="font-size:50px">#Html.Raw(rows)</div>
<div class="title" style="font-size:large;">Available Drivers</div>
</div>
<!--/.info-box-->
</div>
</a>
<!--/.col-->
<a href="~/Vehicle/Index">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box brown-bg">
<i class="fa fa-truck"></i>
<div class="count" style="font-size:50px">#Html.Raw(rows1)</div>
<div class="title" style="font-size:large">Available Vehicles</div>
</div><!--/.info-box-->
</div><!--/.col-->
</a>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box red-bg">
<i class="fa fa-exclamation-triangle"></i>
<div class="count" style="font-size:50px">#Html.Raw(rows4)</div>
<div class="title" style="font-size:large;">Problems Encountered</div>
</div><!--/.info-box-->
</div><!--/.col-->
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box green-bg">
<i class="fa fa-check"></i>
<div class="count" style="font-size:45px">#Html.Raw(rows3)/#Html.Raw(rows2) </div>
<div class="title" style="font-size:large">Completed Deliveries</div>
</div><!--/.info-box-->
</div><!--/.col-->
</div>
</section>