I am trying to use bootstrap panels with bootstrap tabs. It works fine when one panel is in a tab, but as soon as I stick another panel in the tab, the tab functionality breaks:
<ul class="nav nav-tabs" role="tablist">
<li class="active">Contact Information</li>
<li>Lead History</li>
<li>Client History</li>
</ul>
<div class="tab-content" style="margin-top: 2em;">
<div class="tab-pane active" id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">Contact Information</div>
<div class="panel-body">
<div class="well">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Open Tasks</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
<div class="tab-pane" id="lead">
<h1>Hello World</h1>
</div>
<div class="tab-pane" id="client">
<h1>Hello World Again</h1>
</div>
</div>
Here is the demo showing how the tabs break:
http://www.bootply.com/oCwV3bLFQl
As soon as you remove the second panel-default in col-md-4 class, then the tabs work again. How can I have multiple panels within a tab and have the tab continue to work?
Your last two .tab-pane divs were outside of the .tab-content div. Edited fork: http://www.bootply.com/WI7OzQ0nqu
Related
Im working on a tabs area. Im using row system via container. But the rows are doesnt work with the tabs. I find the problem in css file. But i cant solve it.
[i want to use this selected area
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active row " id="kt_vtab_pane_2" role="tabpanel">
<div class="container" >
<div class="row">
<div class="col-md-6">
<span><b>Raporlanma Zamanı:</b> 10.11.2021 15:23</span><br>
<span><b>Açıklama:</b> Havlu İsteniyor </span><br>
<span><b>Konum:</b> 1453 </span>
</div>
<div class="col-md-6">
<span><b>Çözüm:</b> 10 Dakika</span><br>
<span><b>Atanan Yetkili:</b> Yağız Savaş </span><br>
<span><b>Görevli:</b> HK Runner </span><br>
<span><b>Görevli Departman:</b> Hause Keeping </span><br>
<span><b>Geri Arama:</b>Gerekmiyor</span><br>
<span><b>Öncelik Seviyesi:</b>2</span>
</div>
</div>
</div>
</div>
<div class="tab-pane fade " id="kt_vtab_pane_3" role="tabpanel">lorem</div>
<div class="tab-pane fade" id="kt_vtab_pane_4" role="tabpanel">lorem</div>
<div class="tab-pane fade" id="kt_vtab_pane_5" role="tabpanel">lorem</div>
</div>
]1
The problem class is tab-content and tab-pane. This style codes are here ; `.tab-content>.tab-pane {
display: none;
}
.tab-content>.active {
display: block;
`
please help me i dont now what will i do :/
The route of your problem and problems to come is having containers and rows structured incorrectly. Ideally and for proper Bootstrap your structure should be.
<section>
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- Your tabs here -->
You should not have containers and rows inside other elements. You should put your tabs and related elements inside a column. All columns are inside a row. All rows are inside containers.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="kt_vtab_pane_2" role="tabpanel">
<div>
<div class="row">
<div class="col">
<span><b>Raporlanma Zamanı:</b> 10.11.2021 15:23</span><br>
<span><b>Açıklama:</b> Havlu İsteniyor </span><br>
<span><b>Konum:</b> 1453 </span>
</div>
<div class="col">
<span><b>Çözüm:</b> 10 Dakika</span><br>
<span><b>Atanan Yetkili:</b> Yağız Savaş </span><br>
<span><b>Görevli:</b> HK Runner </span><br>
<span><b>Görevli Departman:</b> Hause Keeping </span> <br>
<span><b>Geri Arama:</b>Gerekmiyor</span><br>
<span><b>Öncelik Seviyesi:</b>2</span>
</div>
</div>
</div>
</div>
<div class="tab-pane fade " id="kt_vtab_pane_3" role="tabpanel">lorem</div>
<div class="tab-pane fade" id="kt_vtab_pane_4" role="tabpanel">lorem</div>
<div class="tab-pane fade" id="kt_vtab_pane_5" role="tabpanel">lorem</div>
</div>
I have this template that is working fine.
But when I want to separate the single-course (or product) in a component, row-class not working fine and items are under each other...
This is my code:
<div class="col-lg-9">
<div class="row">
<app-single-course></app-single-course>
<app-single-course></app-single-course>
</div>
</div>
Update
this is the code without single component and its working fine if I copy it they appear side by side.
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-course-inner style-two">
<div class="thumb">
<img src="assets/img/course/2.png" alt="img">
<div class="rating">4.9/5 <i class="fa fa-star"></i></div>
<i class="fa fa-bookmark-o"></i>
</div>
<div class="details">
<div class="meta">
<div class="row">
<div class="col-6">
<p>5,957 students</p>
</div>
<div class="col-6 text-right">
<p>01h 49m</p>
</div>
</div>
</div>
<h5>Motion Graphics: Create a Nice Typography Animation</h5>
<div class="price-inner">
<div class="row">
<div class="col-6">
<p>$33.99</p>
</div>
<div class="col-6 text-right">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think you might talk about the bootstrap grid system.
Well first of all the col class comes inside the row class or else you'll always have item "under each other".
Here is the documentation with examples : https://getbootstrap.com/docs/4.5/layout/grid/
I'm trying to figure out the horizontal version of https://stackoverflow.com/a/25298473/7835535. Instead of having the content scroll vertically, I want the content to scroll horizontally.
Fiddle taken from the original post
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
<span class="pull-right">
<ul class="nav panel-tabs">
<li class="active">Tab 1</li>
</ul>
</span>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="test">
CONTENT
</div>
</div>
</div>
</div>
</div>
Here You go Fiddle: http://jsfiddle.net/51n56p94/
You need to add this css
.tab-pane{
width:1000px;
}
.tab-content{
overflow-x:scroll;
}
I am wanting to line two panels up alongside each other.
I currently have one panel (12 wide) which is above and I want two panels to sit below it next to each other to be 6 wide) however the second panel won't line alongside the first panel:
HTML
.panel-heading {
background: #666;
color: #FF7800;
font-family: sans-serif;
}
.panel-body {
background: #999;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
</div>
I have tried floating the panel left but this has no effect, any help would be great. Thanks
You need to use only one container
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
You don't need to make new rows for every panel, and you don't need a new container either.
Also, if your goal was to have this be a two-column thing on all screen sizes, you need to use the col-xs-* classes.
.panel-heading {
background: #666;
color: #FF7800;
font-family: sans-serif;
}
.panel-body {
background: #999;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
<div class="col-xs-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
<div class="col-xs-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Conent
</div>
</div>
</div>
</div>
Bootstrap by default makes a row go full width.
Try moving both 6's into the same row, that should let them sit next to each other.
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body"> Panel Conent </div>
</div>
<div class="col-sm-6">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body"> Panel Conent </div>
</div>
</div>
</div>
In bootstrap 3 i'm trying to create a list of vertical panels as can be seen on this link for the search results filters. It has one main panel and multiple panels inside this main panel. I m trying the following html and styles but unable to create the desired layout of panels. Any ideas ? thanks
<div class="panel panel-default col-md-3">
<div class="panel-heading">Refine Search</div>
<div class="panel-body">
<div class="panel panel-default">
<!-- Default panel contents 1 -->
<div class="panel-heading">Panel heading 1</div>
<div class="panel-body">
<p>...</p>
</div>
</div>
<div class="panel panel-default">
<!-- Default panel contents 2 -->
<div class="panel-heading">Panel heading 2</div>
<div class="panel-body">
<p>...</p>
</div>
</div>
</div>
</div>
I found a missing div, and you should probably do your column definition in a parent div tag to fix the formatting issues. Here is a JSFiddle with the solution: http://jsfiddle.net/hbqau1h6/1/
<div class="row">
<div class="col-md-3"><!-- Added containing column definition -->
<div class="panel panel-default">
<div class="panel-heading">Refine Search</div>
<div class="panel-body">
<div class="panel panel-default">
<!-- Default panel contents 1 -->
<div class="panel-heading">Panel heading 1</div>
<div class="panel-body">
<p>...</p>
</div>
</div>
<div class="panel panel-default">
<!-- Default panel contents 2 -->
<div class="panel-heading">Panel heading 2</div>
<div class="panel-body">
<p>...</p>
</div>
</div>
</div> <!-- Missing div here -->
</div>
</div>
<div class="col-md-9">
<h2>Search results</h2>
...
</div>
</div>