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>
Related
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 added a new advertising block to the header visible here: https://musebycl.io/test_page. This made the navigation block move to the far right. I can't figure out why that is happening, even though these elements are supposedly in separate divs.
How do I modify the header ad or the navigation HTML/CSS to bring the navigation back to its normal position as visible on the home page (https://musebycl.io/)?
Your framework applies flex rules on the .row element that push your navigation block to the right, as it has no defined width.
Try to move your add .block-content one level up in your rows into div.container.py-2.row
with this html it works:
<div class="container py-2">
<div class="row justify-content-between align-items-center">
<div class="block-content">
<div
class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
...
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center">
<div class="col-auto">
<div class="region region-logo">
<div id="block-headerad"
class="block block-block-content block-block-content98569f6a-2644-4a93-a22a-d735717c7cda">
</div>
<div id="block-muse-sitebranding-3" class="block block-system block-system-branding-block">
<a href="/" rel="home" class="site-logo">
<img src="https://cdn.musebycl.io/compact-muse-logo.png" alt="Home">
</a>
</div>
</div>
</div>
<div class="col-auto d-none d-lg-block">
<div class="region region-header-primary-menu">
...
</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center no-gutters">
<div class="col-auto d-none d-lg-block">
<div class="social-menu d-flex align-items-center">
...
</div>
<div class="col-auto">
<div id="user-action-menu" class="user-action-menu d-flex align-items-center">
...
</div>
</div>
<div class="d-lg-none">
...
</div>
</div>
</div>
</div>
</div>
You can create external CSS like
#advertising-nav-bar {
position: fixed;
top: 0px;
}
HTML :
<div id="advertising-nav-bar">
<!--content -->
</div>
You have to give your block-content a width.
Like:
.block-content{
width: 500px;
}
I'm new in bootstrap and css, and I want to design this output:
For that purpose write this :
<div class="row">
<div class="col-md-12 col-md-1 col-md-4 col-md-8" style="background-color: yellow; width: 100%; height: 100%; position: fixed;">
<nav class="navbar navbar-default navbar-left">
<div class="container">
behzad
</div>
</nav>
<div class="col-md-1">
</div>
</div>
</div>
But that is not correct, how can I solve that?
You are not using bootstrap correctly. Put your col definitions within separate div's: Also make use of bootstrap's xs, and md definitions. Finally, put your row inside a container.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
</div>
</div>
Working example: https://jsfiddle.net/mspinks/zf0q5cLk/3/
Bootstrap should follow pattern: container - row - col. Then use -xs (xsmall devices), -sm (small devices), -md (medium devices), -lg (large devices) to change grid design based on device.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<!-- Left panel, top panel on mobile device -->
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<!-- Content -->
<div class="row">
<div class="col-xs-1">
<!-- First empty col (Also can use offset) -->
</div>
<div class="col-xs-1">
</div>
<div class="col-xs-1">
</div>
.
.
.
<div class="col-xs-1">
<!-- Last empty col (Also can use offset) -->
</div>
</div>
</div>
</div>
</div>
If u want to use col-offset try this approach:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<!-- Left panel, top panel on mobile device -->
</div>
<div class="col-xs-8 col-lg-offset-2">
<!-- Content -->
<div class="row">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
</div>
.
.
.
</div>
</div>
</div>
</div>
Offset moves columns to the right using .col-xs(sm, md, lg)-offset-*. These classes increase the left margin of a column by * columns. In this example, .col-xs-offset-2 moves columns over two columns.
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
I'm trying to bulid grids like the photo below
IMG LINK: http://postimg.org/image/qo3b4nof1/
But i'm getting the DIV E in almost next to the D-DIV
here's my code
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="col-md-1">A</div><br/>
<div class="col-md-1">B</div><br/>
<div class="col-md-1">C</div>
</div>
<div class="col-md-11">D<br/>
<div class="col-md-1">E</div>
</div>
</div>
</div>
The break-lines i added because DIV-A and DIV-B become one piece without breaklines.
is it better to do it with table ?
You do not need to use container and row with bootstrap 3.*
I changed you code to match the provided screenshot, see this http://jsfiddle.net/Sd2zw/ .
I just use xs columns because the small screen of jsfiddle, you can replace it back by md :
<div>
<div class="col-xs-1">
<div class="col-xs-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<span class="clearfix"></span>
</div>
<div class="col-xs-11">
<div class="col-xs-12 d-container">D</div>
<div class="col-xs-12">
<div class="col-xs-1">E</div>
<span class="clearfix"></span>
</div>
</div>
<span class="clearfix"></span>
</div>
Also, use some clearfix tags to clear the float.