I have made a layout for showing shopping products of an online store using Bootstrap 3 and it looks like this:
As you can see there is a gap between Films container and the separator line and I need to remove this gap. So the Films container would stick to the right side.
And here is the code for that:
<section>
<div class="flex-kit-game-shop-main">
<!--Books -->
<div id="training-kit" style="background-color: #339966 !important;" class="">
<div class="card bg-transparent border-0 m-r-card">
<div class="">
<div class="title-tab-shop">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
...
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="latest-products">
...
</div>
<div class="tab-pane container fade" id="most-bied">
...
</div>
<div class="tab-pane container fade" id="popular-products">
...
</div>
</div>
</div>
</div>
</div>
</div>
<!--Films -->
<div id="training-kit" style="background-color: #0066ff !important;" class="" >
<div class="card bg-transparent border-0 m-r-card" >
<div class="">
<div class="title-tab-shop">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
...
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="latest-products">
...
</div>
<div class="tab-pane container fade" id="best-selling-products">
...
</div>
<div class="tab-pane container fade" id="popular-products">
...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I can stick the Films container elements to the right by saying margin-right:-10px; but will affect the added products and make them bigger than their normal size.
So how can I properly make this Films container stick to the right in Bootstrap?
CSS File:
.flex-kit-game-shop-main {
display: flex;
flex-direction: row;
}
#media screen and (max-width: 1200px) {
.flex-kit-game-shop-main {
flex-direction: column;
}
}
Go to the your css file. Find ".flex-kit-game-shop-main" selector. Probably, display value of your top parent div element is "flex"(display:flex;). If it is, I would recommend that you research about conseption of "flexbox" in css. And then, you will be aware of what you should do.
A better option over here is to use the float property in CSS
select the box you wanna align to a side and then add float: left; also remember to clear the float if later you don't wanna use it further, for that add clear: both;
Related
I have site and using Bootstrap 3. I have problem with my product grid. I need to remove padding from my product list.
www.shop11.kg
Sorry my English.
Thanks
<div class="tab-content">
<!-- Start gridview products -->
<div id="grid-view" class="tab-pane fade in active" role="tabpanel">
<div class="row">
<!-- Start Single profuct -->
<div class="col-md-3 col-sm-4 col-lg-3 col-xs-12">
<div class="single-product">
<div class="product-thumb">
<a href="/product/1264">
<img class="front-img" src="/public/images/noimage/noimage_262.jpeg" alt="img">
</a>
</div>
<div class="product-info">
<div class="pro-title">
<h4>
<a href="/product/1264" title="ARIEL COLOR Стиральный порошок для цветного белья автомат 15 кг ">
ARIEL COLOR Стиральный порошок для цветного белья автомат 15 кг
</a>
</h4>
</div>
<div class="pro-price-ratting">
<div class="price-box">
<span class="price">1580 сом</span>
</div>
</div>
<div class="product-action">
Купить
</div>
</div>
</div>
</div>
<!-- End Single profuct -->
</div>
</div>
<!-- End gridview products -->
You can use display:flex and flex-flow:row wrap in your row class so all the items will be wrapped properly i.e
.row{
margin-right: -15px;
margin-left: -15px;
display: flex;
flex-flow: row wrap;
}
You can give css like
.cp-right-products .tab-pane .col-md-3:nth-child(4n+1) {
clear: both;
}
in tablet view you can give css like
.cp-right-products .tab-pane .col-md-3:nth-child(3n+1) {
clear: both;
}
then all items will be arrange properly.
I have a navbar inside the tab-content that has pull-right bootstrap class ,we are rendering element js-property-panel based on user selection so when this element loads it is overlapping on navbar. So both are iniside cols 10. How can i set position of navbar using pull-right when js-property-panel loads it should moved to right ?
main.html
<div class="col-md-10" ng-class="{'col-md-12':isCollapsed,'col-md-10':!isCollapsed,'tabContentCollapse-padding':isCollapsed}">
<div class="tab-content">
<nav class="navbar navbar-default pull-right">
<div class="container-fluid">
//navbar stuff here
</div>
<!-- /.container-fluid -->
</nav>
<div role="tabpanel" class="active" id="tab">
<div>
<div id="home" class="fade in active">
<div class="modeler">
<div id="canvas" style="height:80vh;"></div>
<div id="js-properties-panel"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Are you looking for a pure css solution? As this can be achieved with
javascript pretty easily.
Also here is a link of css tricks that might be useful to
introduce conditional styling using css.
Update:
Here is how far I could get to- please follow the fiddle here
<div class="col-md-10" ng-class="{'col-md-12':isCollapsed,'col-md-10':!isCollapsed,'tabContentCollapse-padding':isCollapsed}">
<div class="tab-content row">
<div class="col-md-6 col-md-push-6 navwrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
//navbar stuff here
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div role="tabpanel" class="col-md-6 col-md-pull-6" id="tab">
<div>
<div id="home" class="fade in active">
<div class="modeler">
<div id="js-properties-panel" class="panel-contents">
sample content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Observations:
What you are trying to achieve is controlling the style of an element
higher up the DOM tree using a state an element lower down the tree.
Neither those elements are direct parent-child nor are those siblings
so you could control using common class and may be adding a
:not(:empty) selector.
You could still use the column-ordering to a certain extend though
I am currently using a Bootstrap for my website with a left sideBar navigation.
At the main content, i have 2 container for left and right content.
What I want is like the image below and i already done this:
and when the toggle button is clicked then the `rightDiv` will resize
which is my main problem and i'm not able to do:
and when the browser/device is small lets say mobile device then it be
like this and i already done this.
I am able to do the first and third image but failed at the second image which will resize the rightDiv on toggle button clicked.
so far i have this in my HTML:
<div id="wrapper">
<!--Start of Sidebar navigation -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<span>Home</span>
</li>
....
</ul>
</div>
<!-- End of Sidebar navigation-->
<!-- Start Main Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<!--START OF LEFT DIV-->
<div class="row-post-container">
</div>
<!--END OF LEFT DIV-->
</div>
<!--START OF RIGHT DIV-->
<div class="main-right-side-container">
<div class="right-side-container">
....
</div>
</div>
<!--END OF RIGHT DIV-->
</div>
</div>
</div>
<!-- END Main Content -->
</div>
and in my CSS i have this for left and right sidebar of DIV:
.row-post-container{
display: table-cell;
float: left;
max-width: 800px;
width: 100%;
min-width: 300px;
margin-right: 20px;
}.main-right-side-container{
display: table-cell;
min-width: 300px;
width: 100%;
max-width: 300px;
vertical-align: top;
height: 300px;
float: left;
padding: 0px;
margin-top: 20px;
}
Anyone has an idea?
For more clarification please do ask me.
Please suggest only CSS.
Thak you very much.
EDIT: the orange is leftDiv and dark green at the right side of orange is RightDiv.
One of the main things you are not considering is having bootstrap columns.
I have modified the example link you gave me and duplicated to have the two columns instead of one. By default, this is the current skeleton or rather structure of the code in the example -
Current Implementation on the example site
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<!-- your code here -->
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
Change to add columns like below -
In here, i suggest you should go on about adding more columns like so -
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8"> <!-- your leftDiv code here --> </div>
<div class="col-lg-4"> <!-- your rightDiv code here --> </div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
First try to make full use of bootstrap classes, check this-
HTML-
<p><input type="button" id="showHideBtn" value="Slide Menu"></p>
<div id="sidebar-wrapper col-md-3">
<ul class="sidebar-nav">
<li>
<span>Home</span>
</li>
....
</ul>
</div>
<div id="page-content-wrapper" class="col-md-9">
<div class="container-fluid">
<div class="row">
<!--START OF LEFT DIV-->
<div class="col-xs-12 col-md-9 row-post-container">
</div>
<!--END OF LEFT DIV-->
<!--START OF RIGHT DIV-->
<div class="col-xs-12 col-md-3 main-right-side-container">
</div>
<!--END OF RIGHT DIV-->
</div>
</div>
</div>
CSS -
.hide{display:none !important;}
JS -
$('#showHideBtn').click(function(e){
$('#sidebar-wrapper').toggleClass('hide');
if($('#page-content-wrapper').hasClass('col-md-9')){
$('#page-content-wrapper').removeClass('col-md-9');
}else{
$('#page-content-wrapper').addClass('col-md-9');
}
});
I have three divs like this:
<div class="container-fluid">
<div class="header">
Welcome
</div>
<div class="navbar">
Menu
</div>
<div class="content">
Website content
</div>
</div>
Now, the first div class="container-fluid" is stretched on all browser window. The next class="header has padding/margin of some pixels from his parent element. Now I´d like this div to stretch all browser window out. But I also don´t want next class="menu" or class="content" to be stretched out.
How may I solve this?
Use .container for navbar and content & .row for .header like this: Demo
<div class="row">
<div class="header col-xs-12 col-sm-12 ">Welcome</div>
</div>
<div class="row">
<div class="container">
<div class="navbar">Menu</div>
<div class="content">Website content</div>
</div>
</div>
This sounds like a two-column layout with a full-width header. You tagged Twitter Bootstrap so I'll explain how to use those styles to do what you want.
<div class="row container-fluid">
<div class="header">
Welcome
</div>
<div class="span3 navbar">
Menu
</div>
<div class="span9 content">
Website content
</div>
</div>
The row class is on the element that wraps the columns. span# is the class that gives each column its size. So for a 12-unit width, you could assign span3 to the navbar and span9 to the content area.
Without Bootstrap, this is still relatively simple. You can do this in CSS.
.navbar {
display: inline-block;
width: 25%;
}
.content {
display: inline-block;
width: 75%;
}
<div class="container-fluid">
<div class="header">
Welcome
</div>
</div>
<div class="container">
<div class="navbar">
Menu
</div>
<div class="content">
Website content
</div>
</div>
Use container class outside menu and content. Hope this will help you.
jsFiddle Demo
i'm using bootstrap tab and i want to divide this tab with bootstrap grid system but because of the float:left; , tabs background not showing.
here is my code;
<div role="tabpanel" class="tab-pane fade in active" id="home">
<div class="col-lg-6">
<h3>Categories</h3>
</div>
<div class="col-lg-6" >
<h3>Datasets</h3>
</div>
</div>
if i don't add this col-lg-6 classes it is working properly , thank you for your suggestions
Fixed Code; (just added row class before grid classes)
<div role="tabpanel" class="tab-pane fade in active" id="home">
<div class="row">
<div class="col-lg-6">
<h3>Categories</h3>
</div>
<div class="col-lg-6" >
<h3>Datasets</h3>
</div>
</div>
</div>
I'm guessing at what the actual problem is, but you almost always want to wrap columns in a row element.
<div class="row">
<div class="col-xs-6">
<h3>Categories</h3>
</div>
<div class="col-xs-6">
<h3>Datasets</h3>
</div>
</div>
Demo
The row element forces the tab element to clear the floated columns. If you already have a row element outside the tab panes, either move it inside or add a full-width column outside and a row inside.
Fiddle updated with tab color.