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/
Related
I have seen there are some examples of using push/pull with bootstrap 3 but I haven't had much like trying it out. Is it possible in this example to get col-sm-4 content to show before col-sm-5 col-lg-12 on mobile as col-sm-4is currently showing last on mobile.
<section id="inner-page" class="container">
<div class="row">
<div class="col-lg-8 col-sm-7">
<div class="post-media">
<div id="slider" class="flexslider">
<ul class="slides">
<li></li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li></li>
</ul>
</div>
</div>
<div class="row mTop-20">
<div class="col-sm-5 col-lg-12">
content
</div>
</div>
</div>
<div class="col-sm-4">
content
</div>
</div>
</section>
With Bootstrap 3
You can use push and pull classes
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div style="border: 1px solid red" class="col-sm-4 col-lg-push-8 col-sm-push-7">
content
</div>
<div style="border: 1px solid green" class="col-lg-8 col-sm-7 col-sm-pull-4">
<div class="post-media">
<div id="slider" class="flexslider">
<ul class="slides">
<li></li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li></li>
</ul>
</div>
</div>
<div class="row mTop-20">
<div class="col-sm-5 col-lg-12">
content
</div>
</div>
</div>
</div>
With Bootstrap 5
You can use the order property
add the class order-0 order-sm-2 for col-sm-4 and the classe order-1 for col-sm-7
or the flex-direction property
add the classes flex-column-reverse flex-sm-row for the row
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'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>
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 make my tabs look like this (picture 1) at all sizes. However, when I resize my tabs they look like this (picture 2). How can I fix it?
Here's my fiddle:
https://jsfiddle.net/whywymam/86zgeLf1/
My HTML code:
<div class="Container">
<div class="row">
<div class="panel panel-center">
<div class="panel-header">
<h1>Job Category</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/bankinglogo.png" width="180px" >
<p class="bankingl"> Banking and Finance </p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/engineerlogo.png" width="180px" >
<p class="bankingl"> Banking and Finance </p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/healthcare.png" width="180px" >
<p class="bankingl">Healthcare</p>
</a>
</div>
<div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/technicia.png" width="185px" >
<p class="bankingl">IT</p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/oilandgas.png" width="200px" >
<p class="bankingl">Oil and Gas</p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/retail.png" width="180px" >
<p class="bankingl">Retail and Hospitality</p>
</a>
</div>
<div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
</div>
<div class="panel panel-default jobPanel center-block">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
<div class="panel-body">
<div class="tabbable">
<ul class="nav nav-tabs nav-justified selected">
<li class="active">Job Search
</li>
<li>PYW
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<form class="form-horizontal">
<div class="form-group name-group">
<label for="keyword" class="col-sm-3 control-label">Keyword</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter keyword" />
</div>
</div>
<div class="form-group">
<label for="location" class="col-sm-3 control-label">Location</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter location" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9"> Search
</div>
</div>
</form>
</div>
<!--end of tab 1-->
<div class="tab-pane" id="tab2">
<form class="form-horizontal">
<div class="form-group name-group">
<label for="keyword" class="col-sm-3 control-label">Keyword</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter keyword" />
</div>
</div>
<div class="form-group">
<label for="location" class="col-sm-3 control-label">Location</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter location" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9"> Search
</div>
</div>
</form>
</div>
<!--end of tab 2-->
</div>
<!--end of tab content-->
</div>
<!-- end of tabbable-->
</div>
<!--end panel body-->
</div>
<!-- end of formTab -->
</div>
<!--end of panel container-->
<script src="bootstrap/js/jquery-1.11.1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</div>
Bootstrap takes a mobile-first approach, the code you have provided doesn't show the sign-in and sign-up tabs or fields.
But looking at your HTML markup, I can clearly tell you one thing you're missing.
The classes .col-sm-* , col-md-* , col-lg-*, since Bootstrap is mobile-first the class col-xs-* , is the class that you probably want to be adding to your HTML markup.
So I guess if your markup looks something like :
<div class="container">
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
You got to add the col-xs-* clas as well so that at smaller widths (mobile and small device screens), the columns are maintained rather than tiled one after another.
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
</div>
<div class="col-xs-6 col-md-6">
</div>
</div>
</div>
Further reading: Subtle magic of how the Bootstrap Grid works.