Hi am using bootstrap 4 i have developed menu bar. In that menu bar it has categories like LAPTOP,MOBILES,CAMERA etc. when user click menu it will display the products based on that category.
My doubt was i have tried to implement transition effect in LAPTOP.But first i tried in hover effect it was working fine but by requirement was when i click the menu then only it should display the products with transition effect. so please tell me how to achieve it.
Alternatively instead of hover i have tried focus and checked but it doesn't work.
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
height:166px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
min-width: 1600px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
transition: all 1s ease-in;
overflow:hidden;
height:0;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
height:166px;
}
.nav-link-type-one {
color: white !important;
text-decoration: none;
font-size: 26px;
width: 185px;
height: 51px;
text-align: center;
}
.nav-link-type-one:hover {
text-decoration: none;
}
.navbar-dark .navbar-nav .show>.nav-link-type-one {
color: #ec7f4a !important;
text-decoration: none
}
.bg-dark-type-one {
background-color: #232323 !important;
}
.nav-link-type-one {
position: relative;
}
.nav-link-type-one::after {
position: absolute;
top: 50%;
right: 0;
display: inline-block;
width: 10px;
height: 10px;
margin-right: -21px;
margin-top: -7%;
background-image: url('../../../../assets/icons/Path247.svg');
background-size: cover;
background-repeat: no-repeat;
transform: rotate(136deg);
content: '';
}
li.show .nav-link-type-one::after {
background-image: url('../../../../assets/icons/Path244.svg');
transform: rotate(226deg);
margin-top: -3%;
}
/* hover effect for 1 Dropdown */
.dropdown-hover-one-effect:hover {
outline: 2px solid #ec7f4a;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav *ngIf="bg_color == 'black' && color == 'orange' " class="navbar navbar-expand-lg navbar-dark bg-dark-type-one">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown nav-org">
<a class="nav-link-type-one nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
LAPTOP
</a>
<div class="dropdown-content" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
</div>
<h6> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&q=90&m=6&h=623&w=767&b=%23FFFFFFFF&l=f&f=jpg&o=t&aim=true"
alt="">
</div>
<h6> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
SPEAKERS
</a>
<div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUgsHZFrUhLko1Eyed-z_Pwwjg4FqiO9qnJ6uUnVGiqjWBNXlX"
alt="">
<h6> Jass</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeX49tLv6J6I6B77_eam9ZIKTMuTbv15AVJo_T1swI-Azx0xwN">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://ae01.alicdn.com/kf/HTB1cNK.dPoIL1JjSZFyq6zFBpXal/Selfie-Mini-Bluetooth-Speaker-for-Phone-Portable-Wireless-Speaker-Sound-Bluetooth-Handsfree-Cute-Catoon-Rabbit-Cat.jpg_640x640.jpg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://image.made-in-china.com/43f34j00lmAEJKdLdwoq/LED-Bluetooth-Speaker-Portable-Wireless-Speakers-Musical-Audio-Hand-Free-Subwoofer-Loudspeakers-for-Phone-with-Mic-TF-USB-FM.jpg"
alt="">
</div>
<h6> senizer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://cdn11.bigcommerce.com/s-um6op5fe4t/images/stencil/500x659/products/2419/1615/Wireless_Bluetooth_Mini_Speaker_with_led_light_blue2__61739.1499074394.jpg?c=2"
alt="">
</div>
<h6> skulcandy</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOBILES
</a>
<div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://images.samsung.com/is/image/samsung/p5/global/mkt/unpacked201802/pcdpfs/smartphone-galaxy-star-type2.png?$ORIGIN_PNG$"
alt="">
<h6> samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://teja10.kuikr.com/i5/20171228/VB201705171774173-ak_LWBP1579145809-1514461108.jpeg">
<h6> Huawei</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://assets.mspcdn.net/t_c-desktop-normal,f_auto,q_auto,d_c:noimage.jpg/c/11918-55-1.jpg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://img.tatacliq.com/images/i3/252Wx374H/MP000000003623987_252Wx374H_20190111195404.jpeg"
alt="">
</div>
<h6> VIVO</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://4.imimg.com/data4/LL/LL/GLADMIN-/in-resources-8fda3511-a61f-4c26-a4a0-f2bd37049878-images-productimages-29679821-500x500.jpg"
alt="">
</div>
<h6> Iphone 6</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
CAMERA
</a>
<div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://cdn.mos.cms.futurecdn.net/468c23968de175daa7458ece997663ac-320-80.jpg" alt="">
<h6> Sony</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGibGMgRaDelhbNeXcTkUlH1c4yvAtF9oRiM9hP5yjIxzSeP3fUA">
<h6> Nikon</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQA51gnFEIgRWiIT3Y3Qi7gZSIYJ0e43c8x5uUKtVm8jv6Qx8xE">
</div>
<h6> lumix</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRunxpvSx04BfYa9J-axgB8c5BI6_lvzxRlYRzRfDS0-Bb6xM7q"
alt="">
</div>
<h6> Canon</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPI0UfP9Cyn5EC9zKpi_JYduD0DARvGGe8k9ov__LeEQf12dpl"
alt="">
</div>
<h6> Winait</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
DESKTOP
</a>
<div class="dropdown-menu dropdown-menu-five" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://media.hpshopping.in/catalog/product/cache/c58b88357feb47e1e90e0994b7c41391/4/1/41vrhct2ypl_3.jpg"
alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://media.hpshopping.in/catalog/product/cache/c58b88357feb47e1e90e0994b7c41391/4/E/4EB09AA-1_T1539236227.png">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://rukminim1.flixcart.com/image/312/312/jm9hfgw0/allinone-desktop/n/q/w/lenovo-aio-520-22iku-original-imaf97e7bfu9cwjy.jpeg?q=70 ">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05282390.png" alt="">
</div>
<h6> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://www.lenovo.com/medias/lenovo-thinkcentre-m710-tw-gallery1.jpg?context=bWFzdGVyfGltYWdlc3w0NTQ4MHxpbWFnZS9qcGVnfGltYWdlcy9oYWYvaDU4Lzk0MDU4OTI3NTU0ODYuanBnfDA2NTg4MTU2NDAyYmE0NmYxYzhhNDAxMWIzNjQzZjc2MDI5NjQ2NWZiNmJlOTcxNmQzYWM4MDIwYmZmZjEzNDc"
alt="">
</div>
<h6> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Pendrive
</a>
<div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://rukminim1.flixcart.com/image/704/704/pendrive/7/z/g/sandisk-cruzer-blade-16-gb-original-imad4dyumyqy3b4y.jpeg?q=70"
alt="">
<h6> sandisk</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/51bm1Ll%2BeNL._SX425_.jpg">
<h6> hp</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="http://img.fkcdn.com/image/pendrive/p/z/y/sony-usm64x-b-400x400-imaehyjcgqzkxjbu.jpeg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src=" https://img.staticbg.com/thumb/large/oaupload/banggood/images/09/ED/db329437-4b26-4a19-9665-d9f191796397.jpg"
alt="">
</div>
<h6> eagit</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://cdn.buysnip.com/IBALL-64GB-OTG-HYBRID-Pendrive-01.jpg" alt="">
</div>
<h6> iball</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
TABLET
</a>
<div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5PDfCILgeEMDtkdLPrgSVJNBlbMIfPZA_88m2bfMKZ6dzuB5BiQ"
alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnuE-NXyW0xl9Xy4sxNl0myPommcDqPDvF5B2SMGQ-e6PlwmSQ">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTii2lqE4xqlxqwu3rA2ymwZI_To_xq3MOpBJ2dQt9LSaHvXav1">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpXQH2sSOatJ8mOemEI2OBvhHBzDcu8CkHLWDB_Ksp2dvTwvU7xQ"
alt="">
</div>
<h6> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRScLPakgoPm_--CwGtjrhFFr0Mn93005H2Qjfz9TI9LmIiz-o"
alt="">
</div>
<h6> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
HEADSET
</a>
<div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://multimedia.bbycastatic.ca/multimedia/products/500x500/118/11800/11800872.jpg"
alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://www.astrogaming.com/dw/image/v2/AALZ_PRD/on/demandware.static/-/Sites-masterCatalog_AstroGaming_RP/default/dwd035ce5e/product-images/A10-939-001706-Zelda-left-micup.png?sw=720&sh=720&sm=fit">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://target.scene7.com/is/image/Target/GUEST_d50fce48-336a-4979-9423-4c8a2d8ba0f4?wid=488&hei=488&fmt=pjpeg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
</div>
<h6> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://www.lenovo.com/medias/GXD0L03745-main-v1.png?context=bWFzdGVyfHJvb3R8NDY2MzM0fGltYWdlL3BuZ3xoMTQvaDA1Lzk0ODgzOTYxNTY5NTgucG5nfDNhOGQ3MGQ1M2QyNDlkOWY5MGUxZjgxZWE2NGIxZjYzZjQxMjFiZGY2N2ZlODA2NjE0OGJlZjI0NjFiZTY4NTk"
alt="">
</div>
<h6> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
You can use bootstrap collapse instead of the dropdown menu as this comes with a transition. https://getbootstrap.com/docs/4.0/components/collapse/
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
min-width: 1600px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
transition: all 1s ease-in;
overflow: hidden;
height: 0;
}
.nav-link-type-one {
color: white !important;
text-decoration: none;
font-size: 26px;
width: 185px;
height: 51px;
text-align: center;
}
.nav-link-type-one:hover {
text-decoration: none;
}
.navbar-dark .navbar-nav .show>.nav-link-type-one {
color: #ec7f4a !important;
text-decoration: none
}
.bg-dark-type-one {
background-color: #232323 !important;
}
.nav-link-type-one {
position: relative;
}
.nav-link-type-one::after {
position: absolute;
top: 50%;
right: 0;
display: inline-block;
width: 10px;
height: 10px;
margin-right: -21px;
margin-top: -7%;
background-image: url('../../../../assets/icons/Path247.svg');
background-size: cover;
background-repeat: no-repeat;
transform: rotate(136deg);
content: '';
}
li.show .nav-link-type-one::after {
background-image: url('../../../../assets/icons/Path244.svg');
transform: rotate(226deg);
margin-top: -3%;
}
/* hover effect for 1 Dropdown */
.dropdown-hover-one-effect:hover {
outline: 2px solid #ec7f4a;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav *ngIf="bg_color == 'black' && color == 'orange' " class="navbar navbar-expand-lg navbar-dark bg-dark-type-one">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown nav-org">
<a class="nav-link-type-one nav-org " type="btn" href="#collapseExample" id="navbarDropdownMenuLink" data-toggle="collapse" aria-haspopup="true" aria-expanded="false">
LAPTOP
</a>
<div class="collapse" id="collapseExample" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
</div>
<h6> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&q=90&m=6&h=623&w=767&b=%23FFFFFFFF&l=f&f=jpg&o=t&aim=true" alt="">
</div>
<h6> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
SPEAKERS
</a>
<div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUgsHZFrUhLko1Eyed-z_Pwwjg4FqiO9qnJ6uUnVGiqjWBNXlX" alt="">
<h6> Jass</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeX49tLv6J6I6B77_eam9ZIKTMuTbv15AVJo_T1swI-Azx0xwN">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://ae01.alicdn.com/kf/HTB1cNK.dPoIL1JjSZFyq6zFBpXal/Selfie-Mini-Bluetooth-Speaker-for-Phone-Portable-Wireless-Speaker-Sound-Bluetooth-Handsfree-Cute-Catoon-Rabbit-Cat.jpg_640x640.jpg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://image.made-in-china.com/43f34j00lmAEJKdLdwoq/LED-Bluetooth-Speaker-Portable-Wireless-Speakers-Musical-Audio-Hand-Free-Subwoofer-Loudspeakers-for-Phone-with-Mic-TF-USB-FM.jpg" alt="">
</div>
<h6> senizer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://cdn11.bigcommerce.com/s-um6op5fe4t/images/stencil/500x659/products/2419/1615/Wireless_Bluetooth_Mini_Speaker_with_led_light_blue2__61739.1499074394.jpg?c=2" alt="">
</div>
<h6> skulcandy</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MOBILES
</a>
<div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://images.samsung.com/is/image/samsung/p5/global/mkt/unpacked201802/pcdpfs/smartphone-galaxy-star-type2.png?$ORIGIN_PNG$" alt="">
<h6> samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://teja10.kuikr.com/i5/20171228/VB201705171774173-ak_LWBP1579145809-1514461108.jpeg">
<h6> Huawei</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://assets.mspcdn.net/t_c-desktop-normal,f_auto,q_auto,d_c:noimage.jpg/c/11918-55-1.jpg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://img.tatacliq.com/images/i3/252Wx374H/MP000000003623987_252Wx374H_20190111195404.jpeg" alt="">
</div>
<h6> VIVO</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://4.imimg.com/data4/LL/LL/GLADMIN-/in-resources-8fda3511-a61f-4c26-a4a0-f2bd37049878-images-productimages-29679821-500x500.jpg" alt="">
</div>
<h6> Iphone 6</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CAMERA
</a>
<div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://cdn.mos.cms.futurecdn.net/468c23968de175daa7458ece997663ac-320-80.jpg" alt="">
<h6> Sony</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGibGMgRaDelhbNeXcTkUlH1c4yvAtF9oRiM9hP5yjIxzSeP3fUA">
<h6> Nikon</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQA51gnFEIgRWiIT3Y3Qi7gZSIYJ0e43c8x5uUKtVm8jv6Qx8xE">
</div>
<h6> lumix</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRunxpvSx04BfYa9J-axgB8c5BI6_lvzxRlYRzRfDS0-Bb6xM7q" alt="">
</div>
<h6> Canon</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPI0UfP9Cyn5EC9zKpi_JYduD0DARvGGe8k9ov__LeEQf12dpl" alt="">
</div>
<h6> Winait</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
DESKTOP
</a>
<div class="dropdown-menu dropdown-menu-five" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://media.hpshopping.in/catalog/product/cache/c58b88357feb47e1e90e0994b7c41391/4/1/41vrhct2ypl_3.jpg" alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://media.hpshopping.in/catalog/product/cache/c58b88357feb47e1e90e0994b7c41391/4/E/4EB09AA-1_T1539236227.png">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://rukminim1.flixcart.com/image/312/312/jm9hfgw0/allinone-desktop/n/q/w/lenovo-aio-520-22iku-original-imaf97e7bfu9cwjy.jpeg?q=70 ">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05282390.png" alt="">
</div>
<h6> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.lenovo.com/medias/lenovo-thinkcentre-m710-tw-gallery1.jpg?context=bWFzdGVyfGltYWdlc3w0NTQ4MHxpbWFnZS9qcGVnfGltYWdlcy9oYWYvaDU4Lzk0MDU4OTI3NTU0ODYuanBnfDA2NTg4MTU2NDAyYmE0NmYxYzhhNDAxMWIzNjQzZjc2MDI5NjQ2NWZiNmJlOTcxNmQzYWM4MDIwYmZmZjEzNDc"
alt="">
</div>
<h6> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pendrive
</a>
<div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://rukminim1.flixcart.com/image/704/704/pendrive/7/z/g/sandisk-cruzer-blade-16-gb-original-imad4dyumyqy3b4y.jpeg?q=70" alt="">
<h6> sandisk</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/51bm1Ll%2BeNL._SX425_.jpg">
<h6> hp</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="http://img.fkcdn.com/image/pendrive/p/z/y/sony-usm64x-b-400x400-imaehyjcgqzkxjbu.jpeg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src=" https://img.staticbg.com/thumb/large/oaupload/banggood/images/09/ED/db329437-4b26-4a19-9665-d9f191796397.jpg" alt="">
</div>
<h6> eagit</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://cdn.buysnip.com/IBALL-64GB-OTG-HYBRID-Pendrive-01.jpg" alt="">
</div>
<h6> iball</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
TABLET
</a>
<div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5PDfCILgeEMDtkdLPrgSVJNBlbMIfPZA_88m2bfMKZ6dzuB5BiQ" alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnuE-NXyW0xl9Xy4sxNl0myPommcDqPDvF5B2SMGQ-e6PlwmSQ">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTii2lqE4xqlxqwu3rA2ymwZI_To_xq3MOpBJ2dQt9LSaHvXav1">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpXQH2sSOatJ8mOemEI2OBvhHBzDcu8CkHLWDB_Ksp2dvTwvU7xQ" alt="">
</div>
<h6> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRScLPakgoPm_--CwGtjrhFFr0Mn93005H2Qjfz9TI9LmIiz-o" alt="">
</div>
<h6> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HEADSET
</a>
<div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://multimedia.bbycastatic.ca/multimedia/products/500x500/118/11800/11800872.jpg" alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://www.astrogaming.com/dw/image/v2/AALZ_PRD/on/demandware.static/-/Sites-masterCatalog_AstroGaming_RP/default/dwd035ce5e/product-images/A10-939-001706-Zelda-left-micup.png?sw=720&sh=720&sm=fit">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://target.scene7.com/is/image/Target/GUEST_d50fce48-336a-4979-9423-4c8a2d8ba0f4?wid=488&hei=488&fmt=pjpeg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
</div>
<h6> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.lenovo.com/medias/GXD0L03745-main-v1.png?context=bWFzdGVyfHJvb3R8NDY2MzM0fGltYWdlL3BuZ3xoMTQvaDA1Lzk0ODgzOTYxNTY5NTgucG5nfDNhOGQ3MGQ1M2QyNDlkOWY5MGUxZjgxZWE2NGIxZjYzZjQxMjFiZGY2N2ZlODA2NjE0OGJlZjI0NjFiZTY4NTk" alt="">
</div>
<h6> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Related
I'm trying to create a loop where I apply different styling to each odd element.
For this reason, using :nth-child(odd) would be great.
However, for some reason that I don't understand, :nth-child(odd) gets applied to each element, not just the odd ones.
I created a codepen to showcase the issue.
h3.post-title a:nth-child(odd) {
font-weight: bold;
}
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
https://codepen.io/Pbalazs89/pen/eYjZNya
I tried selecting the elements directly (h3.post-title a:nth-child(odd) {}) and I tried selecting their parent container as well (.ts-grid-item-2 h3.post-title a:nth-child(odd) {}) The parent container is not present in the container, I just wanted to list what I tried.
With your actual selector you target every a inside you h3 title.
You have to target every a in the odd element container.
div.item:nth-child(odd) h3.post-title a {}
With this selector you target an a element inside an h3 with class .post-title inside any odd div with class .item
div.item:nth-child(odd) h3.post-title a {
font-weight: bold;
color:red;
}
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<div class="item">
<div class="ts-post-thumb">
<a href="#">
<img class="img-fluid" src="#" alt="">
</a>
</div>
<div class="post-content">
<a class="post-cat ts-blue-bg" href="#"> </a>
<h3 class="post-title">
Title
</h3>
<span class="post-date-info">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
So I have the below code that will render a mega menu for me using the Bulma Framework, but I'm running into issues on having it position center underneath.
Please note: Please click "Run code" and then expand to full page to see what I mean, the mobile version doesn't show it.
The code that I have renders the mega menus as such:
I want to have the hoverable menu item be centered with the mega menu (Meaning have the middle "Sub Menu Title" be right below the blog hover dropdown.
There is a min-width: 50% set on the .navbar-dropdown class.
All help would be appreciated.
.navbar-item.is-mega {
position: static;
.is-mega-menu-title {
margin-bottom: 0;
padding: .375rem 1rem;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io">
<img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navMenubd-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenubd-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home1
</a>
<a class="navbar-item">
Home2
</a>
<a class="navbar-item">
Home3
</a>
<a class="navbar-item">
Home3
</a>
<a class="navbar-item">
Home3
</a>
<a class="navbar-item">
Home3
</a>
<div class="navbar-item has-dropdown is-hoverable is-mega">
<div class="navbar-link flex">
Blog <span class="tag is-info ml-2">Hover here<span>
</div>
<div id="blogDropdown" class="navbar-dropdown " style="min-width: 50%" data-style="width: 18rem;">
<div class="container is-fluid">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item " href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item " href="http://bulma.io/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item " href="http://bulma.io/documentation/columns/basics/">
Columns
</a>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a class="navbar-item " href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item " href="http://bulma.io/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item " href="http://bulma.io/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item " href="http://bulma.io/documentation/layout/container/">
Layout
</a>
</div>
</div>
</div>
<hr class="navbar-divider">
<div class="navbar-item">
<div class="navbar-content">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<strong>Stay up to date!</strong>
</div>
</div>
<div class="level-right">
<div class="level-item">
<a class="button bd-is-rss is-small" href="http://bulma.io/atom.xml">
<span class="icon is-small">
<i class="fa fa-rss"></i>
</span>
<span>Subscribe</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="navbar-item">
Home
</a>
</div>
<div class="navbar-end">
<a class="navbar-item is-hidden-desktop-only" href="https://github.com/jgthms/bulma" target="_blank">
<span class="icon" style="color: #333;">
<i class="fa fa-github"></i>
</span>
</a>
<a class="navbar-item is-hidden-desktop-only" href="https://twitter.com/jgthms" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fa fa-twitter"></i>
</span>
</a>
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://bulma.io&via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
Currently in bulma.min.css .navbar-dropdown has:
position: absolute;
left: 0;
Thus you could add those 2 lines to do the trick:
left: 50%; // will position it at 50% of its relative parent (the .navbar)
transform: translateX(-50%); // will translate it 50% of its own width to the left
<style>
/* Navigation */
#logo{width: 248px;
padding-bottom:25px;
padding-top:25px;
}
.navbar-nav>li>a {
margin-right:-75px;
margin-bottom:10px;
padding-top:10px;
padding-bottom:10px;
text-transform:uppercase;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
background: black;
color:white;
}
#media (min-width: 768px) {
.navbar-collapse {
height: auto;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left:0;
padding-right:0;
}
.navbar-collapse.collapse {
display: block !important;
width: auto !important;
padding-bottom: 0;
overflow: visible !important;
background:white;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar
{
max-width:250px;
margin:0 auto;
border-radius:0;
border:0;
}
.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header
{float:none !important;}
.navbar-right .dropdown-menu {left:0;right:auto;}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: 0;
}
.sidebar-nav{background: white}
}
</style>
<div class="container-fluid">
<div class="col-sm-3">
<div class="sidebar-nav">
<div class="navbar navbar-default avbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<img id="logo" src="assets/img/logo.jpg"/>
<li class="active">Home</li>
<li>About</li>
<li class="filter" data-filter=".category-1">Animation</li>
<li class="filter" data-filter=".category-2">Commercial</li>
<li class="filter" data-filter=".category-3">Documentary</li>
<li class="filter" data-filter=".category-4">Film</li>
<li class="filter" data-filter=".category-5">Music</li>
<li class="filter" data-filter=".category-6">Video Games</li>
<li>Services</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div id="portfolio">
<div class="pContainer">
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
</div>
</div>
</div>
I need to move over the thumbnail gallery by one column. I tried many different ways but everything messes up the layout of the thumbnail gallery itself. I posted this code here but I think it is easier to visit the website to see what I am talking about http://velnikolic.com/video/portfolio.html
Your problem is not so much on moving your gallery a column over, but a better bootstrap html architecture. You declared your sidebar to occupy col-sm-3 but not the gallery to occupy the rest of it (col-sm-9). Do that and then, again, re-distribute your columns inside to show in the layout you want (3 or 4 columns) it doesn't matter.
I made this demo for you with your code
Here is what I suggest you do. It will center all your elements to use most of your browser real estate and will proportionally fix your gutters so that nothing is too heavy to one side or the other.
<div class="container-fluid">
<div class="col-sm-3">
<div class="sidebar-nav">
<div class="navbar navbar-default avbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<img id="logo" src="assets/img/logo.jpg" />
<li class="active">Home</li>
<li>About</li>
<li class="filter" data-filter=".category-1">Animation</li>
<li class="filter" data-filter=".category-2">Commercial</li>
<li class="filter" data-filter=".category-3">Documentary</li>
<li class="filter" data-filter=".category-4">Film</li>
<li class="filter" data-filter=".category-5">Music</li>
<li class="filter" data-filter=".category-6">Video Games</li>
<li>Services</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-9">
<div id="portfolio">
<div class="pContainer">
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x400" alt="">
</a>
</div>
</div>
</div>
</div>
<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
<!--<source src="polina.webm" type="video/webm">-->
<source src="assets/videos/video.mp4" type="video/mp4">
</video>
<footer class="navbar navbar-fixed-bottom">
<div class="footer-container container-fluid">
<div class="social-links">
<i class="fa fa-facebook fa-lg"></i>
<i class="fa fa-twitter fa-lg"></i>
<i class="fa fa-google-plus fa-lg"></i>
<i class="fa fa-pinterest fa-lg"></i>
</div>
</div>
</footer>
</div>
EDIT
to add more gutter to the gallery, modify the thumbnail bootstrap class as follows. Also hiding the overflow to your sidenav container will stop it from leaking into the next col-sm-*.
.thumbnail {
max-width: 231px;
margin: 20px auto;
}
.sidebar-nav {
overflow: hidden;
}
Is there an easy way to do something similar to this in bootstrap? A search bar with a drop down selector for a different category? I've been looking through their documentation, something similar to this but with the dropdown being attached to the search bar is what I'm looking for. I want it to be part of my navbar. I recall seeing an example online but can't seem to find it now. Also wondering where it would go in relation to my header at the moment
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<nav>
<ul class="nav pull-left">
<li><%= link_to 'New Review',
if (current_user)
new_review_path
else
log_in_path
end %></li>
</ul>
</nav>
<nav>
<ul class="nav pull-right">
<li><%= link_to "Home", '/' %></li>
<li><%= link_to "Help", '#' %></li>
<% if current_user %>
<li><%= link_to "Log out", log_out_path %>
<% else %>
<li><%= link_to "Sign up", sign_up_path %></li>
<li><%= link_to "Log in", log_in_path %></li>
<% end %>
</ul>
</nav>
</div>
</div>
</header>
Please, refer this it satisfied your requirement
HTML:
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Contains</li>
<li>It's equal</li>
<li>Greather than ></li>
<li>Less than < </li>
<li class="divider"></li>
<li>Anything</li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
</div>
CSS:
body{
margin-top:20px;
}
JS:
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
$('.input-group #search_param').val(param);
});
});
Refer this link
http://bootsnipp.com/snippets/featured/search-panel-with-filters
See if this example that helps you..
javascript:
/* activate scrollspy menu */
$('body').scrollspy({
target: '#navbar-collapsible',
offset: 50
});
/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 1000);
return false;
}
}
});
CSS:
/*
A custom Bootstrap 3.1 template
from http://bootply.com
This CSS code should follow the 'bootstrap.css'
in your HTML file.
license: MIT
author: bootply.com
*/
html,body {
height:100%;
background:center no-repeat fixed url('/assets/example/bg_suburb.jpg');
background-size: cover;
}
.icon-bar {
background-color:#fff;
}
.navbar-trans {
background-color:#279ddd;
color:#fff;
}
.navbar-trans li>a:hover,.navbar-trans li>a:focus,.navbar-trans li.active {
background-color:#38afef;
}
.navbar-trans a{
color:#fefefe;
}
.navbar-trans .form-control:focus {
border-color: #eee;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
}
section {
padding-top:70px;
padding-bottom:50px;
min-height:calc(100% - 1px);
}
.v-center {
padding-top:10%;
font-size:70px;
}
.well {
border-color:transparent;
}
a.list-group-item.active,[class*='-info'] {
background-color: #168ccc;
color:#fff;
}
#section1 {
background-color: #168ccc;
color:#dedeff;
}
#section2 {
background-color: #e5e5ef;
color:#686868;
}
#section3 {
background-color: #168ccc;
color:#ddd;
}
#section4 {
background-color: #fff;
color:#444;
}
#section5,#section7,#section7 a {
color:#f5f5f5;
}
#section6 {
background-color: #168ccc;
color:#ddd;
}
footer {
background-color:#494949;
color:#ddd;
min-height:100px;
padding-top:20px;
padding-bottom:40px;
}
footer .nav>li>a {
padding:3px;
color:#ccc;
}
footer .nav>li>a:hover {
background-color:transparent;
color:#fff;
}
HTML:
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>What</li>
<li>When</li>
<li>How</li>
<li>Four</li>
<li>Five</li>
<li>Why</li>
<li>Who</li>
<li> </li>
</ul>
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-chevron-down"></span></button>
<ul class="dropdown-menu">
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</div>
<input type="text" class="form-control" placeholder="What are searching for?">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span>
</div>
</div>
</form>
</div>
</div>
</nav>
<section class="container-fluid" id="section1">
<h1 class="text-center v-center">Sectionalize.</h1>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-10 col-sm-offset-2 text-center"><h3>Robust</h3><p>There is other content and snippets of details or features that can be placed here..</p><i class="fa fa-cog fa-5x"></i></div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center"><h3>Simple</h3><p>You may also want to create content that compells users to scroll down more..</p><i class="fa fa-user fa-5x"></i></div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-10 text-center"><h3>Clean</h3><p>In the first 30 seconds of a user's visit to your site they decide if they're going to stay..</p><i class="fa fa-mobile fa-5x"></i></div>
</div>
</div>
</div><!--/row-->
<div class="row"><br></div>
</div><!--/container-->
</section>
<section class="container-fluid" id="section2">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text-center">
<h1>What is Bootstrap?</h1>
<br>
<p class="lead">Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It is the No.1 project on GitHub with 65,000+ stars and 23,800 forks (as of March 2014) [1] and has been used by NASA and MSNBC, among many others..</p>
<br>
<i style="font-size:120px" class="fa fa-camera fa-5x"></i>
<p>Big 'ol Camera Icon</p>
</div>
</div>
</section>
<section class="container-fluid" id="section3">
<h1 class="text-center">Bootstrap is Responsive</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3 class="text-center">Vertical scrolling has become a popular and lasting trend in Web design.</h3>
<div class="row">
<div class="col-xs-4 col-xs-offset-1">Some brand-tacular designs even have home page content that is taller that 12,000 pixels. That's a lotta content.</div>
<div class="col-xs-2"></div>
<div class="col-xs-4 text-right">Anyhoo, this is just some random blurb of text, and Bootply.com is a playground and code editor for Bootstrap.</div>
</div>
<p class="text-center">
<img src="/assets/example/img_mtnpeople.png" class="img-responsive center-block ">
</p>
</div>
</div>
</section>
<section class="container-fluid" id="section4">
<h2 class="text-center">Change this Content. Change the world.</h2>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<img src="/assets/example/bg_smartphones.jpg" class="img-responsive center-block ">
<p class="text-center">Images will scale down proportionately as browser width narrows.</p>
</div>
</div>
</section>
<section class="container-fluid" id="section5">
<div class="col-sm-10 col-sm-offset-1">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="list-group">
<a href="#" class="list-group-item active">
<h2 class="list-group-item-heading">Basic</h2>
<h6>Free to get started</h6>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 100 - more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 2 - this is more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 3 GB</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 4</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Feature</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Feature</p>
</a>
<a href="#" class="list-group-item">
<button class="btn btn-primary btn-lg btn-block">Get Started</button>
</a>
</div>
</div><!--/left-->
<div class="col-sm-4 col-xs-12">
<div class="list-group text-center">
<a href="#" class="list-group-item active">
<h2 class="list-group-item-heading">Better</h2>
<h6>Most popular plan</h6>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 200 - more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 2 - this is more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 5 GB</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 6</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Feature</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Feature</p>
</a>
<a href="#" class="list-group-item">
<button class="btn btn-default btn-lg btn-block">$10 per month</button>
</a>
</div>
</div><!--/middle-->
<div class="col-sm-4 col-xs-12">
<div class="list-group text-right">
<a href="#" class="list-group-item active">
<h2 class="list-group-item-heading">Best</h2>
<h6>For enterprise grade</h6>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 100 - more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 2 - this is more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 8 GB</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 10</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Unlimited</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Unlimited</p>
</a>
<a href="#" class="list-group-item">
<button class="btn btn-default btn-lg btn-block">$20 per month</button>
</a>
</div>
</div><!--/right-->
</div><!--/row-->
</div><!--/container-->
</div>
</section>
<section class="container-fluid" id="section6">
<h2 class="text-center">Do you see what I mean?</h2>
<p class="text-center lead">Add some compelling information here</p>
<img src="/assets/example/bg_iphone.png" class="img-responsive center-block ">
</section>
<section class="container" id="section7">
<h1 class="text-center">Social Media Fascination</h1>
<div class="row">
<!--fontawesome icons-->
<div class="col-sm-1 col-sm-offset-2 col-xs-4 text-center">
<i class="fa fa-github fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-foursquare fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-facebook fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-pinterest fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-google-plus fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-twitter fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-dribbble fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-instagram fa-4x"></i>
</div>
</div><!--/row-->
<div class="row">
<div class="col-md-12 text-center">
<br><br>
<p>
Get the code for this template.
</p>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 column">
<h4>Information</h4>
<ul class="nav">
<li>Products</li>
<li>Services</li>
<li>Benefits</li>
<li>Developers</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 column">
<h4>Follow Us</h4>
<ul class="nav">
<li>Twitter</li>
<li>Facebook</li>
<li>Google+</li>
<li>Pinterest</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 column">
<h4>Contact Us</h4>
<ul class="nav">
<li>Email</li>
<li>Headquarters</li>
<li>Management</li>
<li>Support</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 column">
<h4>Customer Service</h4>
<ul class="nav">
<li>About Us</li>
<li>Delivery Information</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
</div><!--/row-->
</div>
</footer>
http://bootply.com/129806
This is a full-width search form in the navbar along with an input-group-btn on the left side of the input that is used as a dropdown of categories.
I have a problem where I have these div boxes (.span4), they all remain inside a .row-fluid (which is the container with white background). The problem is that the boxes exceed their width and "stick out".
Is there some way to make the spacing between the .span4's to auto adjust to the container width?
See jsfiddle here:
http://jsfiddle.net/QcSqx/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="main-container">
<div class="row-fluid">
<div class="span12">
<h3 class="mycharacters">My characters</h3>
<div class="btn-group pull-right" data-toggle="buttons-radio">
<i class="icon-th-large"></i>
<i class="icon-list"></i>
</div>
<div class="btn-group pull-right">
<a class="add-character-button btn btn-success btn-small dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-plus icon-white"></i> Add character
</a>
<ul class="dropdown-menu">
<li>Add manually</li>
<li class="nav-header">Import</li>
<li>.dnd4e-file</li>
</ul>
</div>
<i class="icon-cog icon-white"></i> Back to Uberview
</div>
</div>
<div class="row">
<div class="span12" id="actor_result"><div class="row-fluid">
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Davius.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=1"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=1"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=1"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Davius</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>17/20hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">aaaaaaa
a
a
a</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">hehe
asa
sd
asd</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Awesome%20Maximus.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=3"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=3"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=3"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Awesomeson Maaaximilian</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>10/30hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">herro</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">lol</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Master%20Thief%20Sven.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=4"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=4"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=4"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Master Thief Sven</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>20/13hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Yeeeeeesss.....huh? ah! ...yeeees</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">wes</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Giant%20Frederic.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=5"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=5"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=5"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Giant Frederic</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>25/27hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Farting</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">I will cruuuush you!</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/One%20eyed%20idiot.jpeg"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=6"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=6"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=6"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">One eyed idiot</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>25/35hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Rested</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">Can't see straight</div>
</div></div>
</div>
</div>
</div>
</div>
</div>
bootstrap puts padding and borders on the well class, which will make the span4s overflow when you add the well class to that div. my suggestion would be to nest the well classes within the span4 divs..
<div class="span4">
<div class="well well-small">
Contents of the div within the well
</div>
</div>
also, it looks like you tried putting 4 boxes on a line.. when you have 12 columns to work with, and you want to put 4 columns in a row-fluid row, you should use span3 (span3 * 4columns = 12 - full width)