I'm working on rebuilding and old SVG based semicircle menu with Bootstrap and I want to have a layout like this:
....[3+3+3+3]....
[12][..6+6..][12]
[12][3+6+3][12]
I have an upper-mid part with a 6 column width and 4 equal inner items, down I have a left and right part with 3 column width and a mid part with 6 column between them. My problem is the left-mid-righ parts don't wrap under the upper-mid part. Bootstrap just squeezes them into one single row...Should it put the items more than 12 columns under it?
Inside the parts the subparts wrap perfectly or when I comment out the left-mid-right part the upper-mid is positioned perfectly.
<div class="container">
<div class="row">
<div class="semicircle-menu col-sm-12 hidden-xs">
<div class="upper-mid col-sm-6 center-block">
<div class="menu-item manage-dashboards col-sm-3">Manage Dashboards</div>
<div class="menu-item add-new-dashboard col-sm-3">Add New Dashboard</div>
<div class="menu-item manage-alerts col-sm-3">Manage Alerts</div>
<div class="menu-item add-new-alert col-sm-3">Add New Alert</div>
</div>
<div class="left col-sm-3">
<div class="menu-item-sub add-new-dataset col-sm-12">Add New Dataset</div>
<div class="menu-item-sub manage-datasets col-sm-12">Manage Datasets</div>
<div class="menu-item-sub data-sources col-sm-12">Data Sources</div>
</div>
<div class="mid col-sm-6">
<div class="menu-item dashboards col-sm-6">Dashboards</div>
<div class="menu-item alerts col-sm-6">Alerts</div>
<div class="menu-item master-data col-sm-3">Master Data</div>
<div class="indicator col-sm-6">DataIQ</div>
<div class="menu-item maintenance col-sm-3">Maintenance</div>
</div>
<div class="right col-sm-3">
<div class="menu-item-sub users col-sm-12">Users</div>
<div class="menu-item-sub user-groups col-sm-12">User Groups</div>
<div class="menu-item-sub settings col-sm-12">Settings</div>
</div>
</div>
</div>
</div>
Here you need to define row when you have defined col-sm-12 each row consist of 12 grid. So to define grids inside a grid you need to define row first and divide those 12 grids accordingly. Here i have updated your code you forgot to add row inside grid. There cannot be 18 grid in one row. Else you have to customize your bootstrap grid.
<div class="container">
<div class="row">
<div class="semicircle-menu col-sm-12 hidden-xs">
<div class="row">
<div class="upper-mid col-sm-6 center-block">
<div class="menu-item manage-dashboards col-sm-3">Manage Dashboards</div>
<div class="menu-item add-new-dashboard col-sm-3">Add New Dashboard</div>
<div class="menu-item manage-alerts col-sm-3">Manage Alerts</div>
<div class="menu-item add-new-alert col-sm-3">Add New Alert</div>
</div>
<div class="left col-sm-3">
<div class="menu-item-sub add-new-dataset col-sm-12">Add New Dataset</div>
<div class="menu-item-sub manage-datasets col-sm-12">Manage Datasets</div>
<div class="menu-item-sub data-sources col-sm-12">Data Sources</div>
</div>
</div>
<div class="row">
<div class="mid col-sm-6">
<div class="menu-item dashboards col-sm-6">Dashboards</div>
<div class="menu-item alerts col-sm-6">Alerts</div>
<div class="menu-item master-data col-sm-3">Master Data</div>
<div class="indicator col-sm-6">DataIQ</div>
<div class="menu-item maintenance col-sm-3">Maintenance</div>
</div>
<div class="right col-sm-3">
<div class="menu-item-sub users col-sm-12">Users</div>
<div class="menu-item-sub user-groups col-sm-12">User Groups</div>
<div class="menu-item-sub settings col-sm-12">Settings</div>
</div>
</div>
</div>
</div>
Do you mean something like that?
<div class="container">
<div class="row">
<div class="semicircle-menu col-sm-12 hidden-xs text-center">
<div class="row upper-mid">
<div class="col-sm-3">Manage Dashboards</div>
<div class="col-sm-3">Add New Dashboard</div>
<div class="col-sm-3">Manage Alerts</div>
<div class="col-sm-3">Add New Alert</div>
</div>
<div class="row">
<div class="col-sm-3 left">
<div class="row">
<div class="col-sm-12">Add New Dataset</div>
</div>
<div class="row">
<div class="col-sm-12">Manage Dataset</div>
</div>
<div class="row">
<div class="col-sm-12">Data Sources</div>
</div>
</div>
<div class="col-sm-6 mid">
<div class="row">
<div class="col-sm-12">Dashboards</div>
</div>
<div class="row">
<div class="col-sm-12">Alerts</div>
</div>
<div class="row">
<div class="col-sm-12">Master Data</div>
</div>
<div class="row">
<div class="col-sm-12">DataIQ</div>
</div>
<div class="row">
<div class="col-sm-12">Maintenance</div>
</div>
</div>
<div class="col-sm-3 right">
<div class="row">
<div class="col-sm-12">Users</div>
</div>
<div class="row">
<div class="col-sm-12">User Groups</div>
</div>
<div class="row">
<div class="col-sm-12">Settings</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
i simply want to join two columns in Bootstrap vertically. Here is the code:
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
Here is an illustration of what i mean:
You can do it this way
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
1
</div>
<div class="col-md-12">
2
</div>
</div>
</div>
<div class="col-md-6">
3
</div>
</div>
</div>
Maybe something like this?
<div class="row">
<div class="col-6">
<div class="row " >
1.
</div>
<div class="row ">
2.
</div>
</div>
<div class="col-6 ">
3.
</div>
</div>
I'm trying to create a template with bootstrap grid system like the image below from medium screen sizes but unable to do so. Below is my code:
HTML:
<div class="container-fluid" style="text-align:center">
<div class="row" style="text-align:center">
<div class="col-md-12" style="font-size:22px">All Blogs </div>
<br><br><br><br>
</div>
<br>
<br>
<div class="row col-md-12 py-3" *ngIf="allBlogs.length>0">
<!-- Card Start -->
<div class="card" *ngFor="let blog of allBlogs">
<div class="row">
<div class="col-md-3">
<a [routerLink]="['/blog', blog.id]"><img src="http://localhost:4000/{{blog.imagePath}}" class="card-img-top card-img-size" alt="blog1"></a>
</div>
<div class="col-md-5 px-3">
<div class="card-block px-6">
<h4 class="card-title">{{blog.title}}</h4>
<p class="card-text">{{blog.description}}</p>
<br>
Read More
</div>
</div>
</div>
</div>
<br>
<app-blog-category></app-blog-category>
</div>
</div>
Here's a template based on the image. I did an 8 and 4 grid size since bootstrap uses the 12 column system but feel free to alter these numbers as needed.
<div class="container-fluid">
<div class="row">
//this col contains your three card rows
<div class="col-md-8">
<div class="row">
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
</div>
</div>
//this is for your shared component
<div class="col-md-4">
<shared-component></shared-component>
</div>
</div>
</div>
I have a little problem with my code. The tabs load but when I click on another inactive tab doesn't hide the content of the first tab and displays the content of both tabs. Is there anything I can do? Thank you very much!
<ul style="list-style:none"class="available-tabs nav nav-tabs" id="tabs" data-tabs="tabs">
<li class="active"> <a data-toggle="tab" href="#featured-tab-body">FEATURED PROJECTS</a></li>
<li> <a data-toggle="tab" href="#available-latest-tab">LATEST PROJECTS </a> </li>
</ul>
<div class="available-content tab-content container">
<div id="available-featured-tab">
<div class="featured-list-wrapper">
<div class="row">
<div class="col-md-12">
<div class="featured-list-content">
<div class="row featured-tab-head" style="color:black;height:40px">
<div class="col-md-5 col-sm-5 col-xs-8">
<h5> YAE</h5>
</div>
<div class="col-md-2 col-sm-2 hidden-xs">
<h5>NAH</h5>
</div>
<div class="col-md-2 hidden-sm hidden-xs">
<h5>HEY</h5>
</div>
<div class="col-md-1 col-sm-2 hidden-xs">
<h5>YOU</h5>
</div>
</div>
<div class="featured-tab-body tab-pane fade in active">
sup
</div>
</div>
</div>
</div>
</div>
<div id="available-latest-tab" class="tab-pane fade">
hi
</div>
</div>
You need to put all the div contents under the same root div.
So istead of:
<div class="available-content tab-content container">
<div id="available-featured-tab">
<div class="featured-list-wrapper">
<div class="row">
<div class="col-md-12">
<div class="featured-list-content">
<div class="featured-tab-body tab-pane fade in active">
sup
</div>
</div>
</div>
</div>
</div>
</div>
<div id="available-latest-tab" class="tab-pane fade">
hi
</div>
</div>
You need:
<div class="available-content tab-content container">
<div id="available-featured-tab">
<div class="featured-list-wrapper">
<div class="row">
<div class="col-md-12">
<div class="featured-list-content">
<div class="featured-tab-body tab-pane fade in active">
sup
</div>
<div id="available-latest-tab" class="tab-pane fade">
hi
</div>
</div>
</div>
</div>
</div>
</div>
</div>
No need for the Jquery, since bootstrap do the work for you.
Corrected fiddle:
http://jsfiddle.net/xFW8t/1777/
Please I am not familiar with Bootstrap 3 and I started to build a small web journal using this framework. I found some difficulties and hope to get some solutions.
My question is how can I code 3 thumbnails then change their order on mobile device?
<div class="col-lg-15 no-padding-left">
<div class="box-news">
<div class="block-title move no-margin">اقليم سيدي بنور</div>
<div class="news-items text-right">
<div class="col-lg-9">
<ul class="list-unstyled no-margin thumb">
<li class="thumbnail md">
<div class="col-xs-8">
اعطاء انطلاقة الدخول التربوي لأقسام التربية غيرالنظامية بسيدي بنور
</div>
<div class="col-xs-7 no-padding">
<img class="img-responsive" src="http://localhost/24/public/uploads/1444912297..jpg">
</div>
</li>
<li class="thumbnail md">
<div class="col-xs-8">
استخدام سيارة للنقل المدرسي في سرقة أسمدة فلاحية من ضيعة برلماني بسيدي بنور
</div>
<div class="col-xs-7 no-padding">
<img class="img-responsive" src="http://localhost/24/public/uploads/1444989659..jpg">
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<div class="thumbnail lg">
<img src="http://localhost/24/public/uploads/1445377322..jpg" alt="...">
<div class="captison">
جماعة سيدي بنور تساهم في المبادرة الملكية 'مليون محفظة'
</div>
</div>
</div>
</div>
</div>
</div>
The result that I want in the image below
Something like this will work: http://jsfiddle.net/WOUNDEDStevenJones/vf4h17L5/1/
<div class="row">
<div class="col-xs-12 col-md-6">text1</div>
<div class="col-xs-12 col-md-6">text2</div>
<div class="col-xs-12 col-md-6">text3</div>
</div>
I'm trying to break two ul lists of jobs under the two headers, "Job Categories" and "Job Function,"into multiple columns, columns not necessarily the same height, and responsive. Otherwise, the single column lists are too long. These two headers and lists should be inline (horizontal). This obviously needs to be responsive for mobile as well.
What's the best way to do this? Visual example below:
Using the grid system, one could "break-up the cells" of the bootstrap grid system:
<div class="container">
<!-- Content Area-->
<div class="row">
<div class="col-md-5 col-sm-6">
<div class="row">
<h2 class="">Job Functions</h2>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row content">
<ul class="list-unstyled">
<li>,</li>
<li>,</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row content">
<ul class="list-unstyled">
<li>,</li>
<li>,</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-5">
<div class="row">
<h2 class="">Job Categories</h2>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row content">
<ul class="list-unstyled">
<li>,</li>
<li>,</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row content">
<ul class="list-unstyled">
<li>,</li>
<li>,</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row content">
<ul class="list-unstyled">
<li>,</li>
<li>,</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
It worked. Enjoy!
<div class="col-md-6">
Bootstrap breaks a page/div down into 12 "columns" inside the class .container. This way you're giving half of that space to one of your headers and it'll be mobile-friendly.
I hope this isn't a gross oversimplification but given the information available it seems right.
Try this
<ul class="col-md-6 col-sm-6 col-xs-12">
<li class="col-xs-12"><h2>Job Function</h2></li>
<li class="col-md-6 col-sm-6 col-xs-12">List 1</li>
<li class="col-md-6 col-sm-6 col-xs-12">List 2</li>
<ul>
<ul class="col-md-6 col-sm-6 col-xs-12">
<li class="col-xs-12"><h2>Job Categories</h2></li>
<li class="col-md-6 col-sm-6 col-xs-12">List 1</li>
<li class="col-md-6 col-sm-6 col-xs-12">List 2</li>
<ul>