I'm trying to implement a navbar megamenu on my website using Bulma, since is the only framework that I found that works without interfering with the code already on the website. I never used Bulma before, and have only some basic knowledge of CSS, HTML and PHP.
The navbar is working fine on the desktop version, but I'm stuck on the mobile version. The drop-down menus are expanded by default, and I can't figure it out how to disable this behaviour. This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://res.cloudinary.com/rosaritoliving/raw/upload/v1564503077/Baja123%20Menu/megamenu_1564427792.css">
<script>
.navbar-item.is-mega {
position: static;
.is-mega-menu-title {
margin-bottom: 0;
padding: .375rem 1rem;
}
}
</script>
</head>
<body>
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="https://www.baja123.com">
<img src="https://mlvtslglmiuu.i.optimole.com/otn1P_eJnbI/w:461/h:92/q:auto/https://www.rosaritoliving.com/wp-content/uploads/logo-baja123-real-estate.png" alt="Baja123 Baja's Best Real Estate Website" width="150" height="50">
</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">
<div class="navbar-item">
<a class="navbar-item" href="https://www.baja123.com">HOME</a></div>
<div class="navbar-item has-dropdown is-hoverable is-boxed">
<div class="navbar-link">OCEANFRONT LISTINGS
</div>
<div id="moreDropdown" class="navbar-dropdown is-boxed">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">BAJA REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/BAJA_REAL_ESTATE/page_2493056.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/BAJA_LIVING/page_2312494.html">About Baja California</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">ROSARITO REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_REAL_ESTATE/page_1754239.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_ROSARITO_MAIN_PAGE_BUYERS_GUIDE/page_2615332.html">About Rosarito Beach</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">TIJUANA REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/TIJUANA_REAL_ESTATE_LISTINGS/page_1754238.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/TIJUANA_BUYERS_GUIDE/page_2649211.html">About Tijuana</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">ENSENADA REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/ENSENADA_REAL_ESTATE_LISTINGS/page_1754240.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/ENSENADA_BUYERS_GUIDE/page_2650491.html">About Ensenada</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable is-boxed">
<div class="navbar-link">BAJA LIVING</div>
<div id="blogDropdown" class="navbar-dropdown is-boxed">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">UTILITIES AND SERVICES</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Water_Company/page_2312474.html">Water Company</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Electric_Company/page_2522445.html">Electric Company</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Gas_Company/page_2522339.html">Gas Company</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Telephone_Service/page_2313221.html">Telephone Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Internet_Service/page_2313224.html">Internet Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Cellular_Service/page_2313222.html">Cellular Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Television_Service/page_2313223.html">TV Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_How_to_Dial_Phones/page_2313225.html">How to Dial Phones in Mexico</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Emergency_Numbers/page_2522342.html">Emergency Phone Numbers</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Bill_Paying_Service/page_2522340.html">Bill Paying Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">MOVING YOUR FURNITURE TO THE ROSARITO AREA</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/MOVING_YOUR_PERSONAL_PROPERTY_INTO_MEXICO/page_2313227.html">Moving Instructions</a>
<a class="navbar-item" href="https://www.baja123.com/STORAGE_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645216.html">Storage Options</a>
<a class="navbar-item" href="https://www.baja123.com/MOVING_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645197.html">Moving Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">AUTO INFORMATION</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/DRIVING_A_US_VEHICLE_IN_MEXICO/page_2313790.html">Driving your Car in Baja</a>
<a class="navbar-item" href="https://www.baja123.com/DRIVING_TIPS_AND_RULES_FOR_MEXICO/page_2313786.html">Driving Tips and Information</a>
<a class="navbar-item" href="https://www.baja123.com/AUTOMOBILE_INSURANCE_IN_MEXICO/page_2313289.html">Auto Insurancce Services</a>
<a class="navbar-item" href="https://www.baja123.com/MECHANICS_IN_THE_ROSARITO_BEACH_AREA/page_2313784.html">Auto Repair Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">HEALTH CARE, HOSPITALS AND DOCTORS IN THE ROSARITO AREA</h1>
<a class="navbar-item" href="https://www.baja123.com/HEALTHCARE_DOCTORS_DENTISTS_AND_HOSPITALS/page_2054379.html">Healthcare, Doctors, Dentists and Hospitals</a>
</div>
</div>
<hr class="navbar-divider">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">INSURANCE SERVICES IN BAJA</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/AUTOMOBILE_INSURANCE_IN_MEXICO/page_2313289.html">Auto Insurance Services</a>
<a class="navbar-item" href="https://www.baja123.com/MEDICAL_INSURANCE_IN_MEXICO/page_2313292.html">Medical Insurance Services</a>
<a class="navbar-item" href="https://www.baja123.com/HOMEOWNER_INSURANCE_IN_MEXICO/page_2313290.html">Homeowners Insurance Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">PETS AND VETS</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/MOVING_PETS_INTO_MEXICO/page_2058791.html">Bring your Pet to the Rosarito Area</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">PROFESSIONAL SERVICES IN BAJA</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/IMMIGRATION_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_1681440.html">Immigration Services</a>
<a class="navbar-item" href="https://www.baja123.com/MAIL_SERVICE_IN_ROSARITO_BEACH/page_2522113.html">Mail Services</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Bill_Paying_Service/page_2522340.html">Bill Paying Services</a>
<a class="navbar-item" href="https://www.baja123.com/LEGAL_SERVICES_IN_MEXICO/page_2313260.html">Legal Services</a>
<a class="navbar-item" href="https://www.baja123.com/ACCOUNTING_IN_MEXICO/page_2313261.html">Accounting Services</a>
<a class="navbar-item" href="https://www.baja123.com/STORAGE_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645216.html">Storage Services</a>
<a class="navbar-item" href="https://www.baja123.com/MOVING_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645197.html">Moving Services</a>
<a class="navbar-item" href="https://www.baja123.com/CLOSING_SERVICES_FOR_BAJA_REAL_ESTATE/page_2645211.html">Closing Services</a>
<a class="navbar-item" href="https://www.baja123.com/PROPERTY_MANAGEMENT_IN_MEXICO/page_2313213.html">Property Management</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">TRANSPORTATION SERVICES</h1>
<a class="navbar-item" href="https://www.baja123.com/GETTING_AROUND_IN_THE_ROSARITO_BEACH_AREA/page_2313801.html">Transportation in Rosarito Beach</a>
</div>
</div>
<hr class="navbar-divider">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">SHOPPING IN THE ROSARITO AREA</h1>
<a class="navbar-item" href="https://www.baja123.com/BUYING_FOOD_IN_MEXICO/page_2313807.html">Supermarkets & Convenience Stores</a>
<a class="navbar-item" href="https://www.baja123.com/BUYING_HOUSEHOLD_FURNISHINGS_IN_MEXICO/page_2313809.html">Furniture & Appliances</a>
</div>
</div>
</div>
</div>
<div class="column">
<div class="navbar-content">
<div class="navbar-item has-dropdown is-hoverable is-boxed">
<div class="navbar-link">
SELLERS & BUYERS
</div>
<div id="moreDropdown" class="navbar-dropdown is-boxed">
<a class="navbar-item" href="https://www.baja123.com/BAJA_REAL_ESTATE/page_2493056.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Baja Real Estate</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-search "></i>
</span>
</div>
</div>
</div>
<a class="navbar-item" href="https://www.baja123.com/LIST_YOUR_ROSARITO_BEACH_PROPERTY/page_2198558.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>List Your Property</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-usd"></i>
</span>
</div>
</div>
</div>
<a class="navbar-item" href="https://www.baja123.com/Newsletter/page_2517204.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Hot Property Alert</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-bullhorn"></i>
</span>
</div>
</div>
</div>
<a class="navbar-item" href="https://www.baja123.com/MEXICO_BUYERS_GUIDE/page_2609247.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Buyer's Guide</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-compass"></i>
</span>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="navbar-item">
<a class="navbar-item" href="http://blog.baja123.com/" target="_blank">BLOG</a></div>
<div class="navbar-item">
<a class="navbar-item" href="https://www.baja123.com/CONTACT_US/page_1232095.html">CONTACT US</a></div>
</nav>
</body>
</html>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any nav burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});</script>
I need the dropdown menus to be collapsed by default on the mobile version, right now they are expanded by default. Your help will be greatly appreciated.
Related
Trying out bootstrap and getting bottom scroll bar. It seems to be some thing with the margins but cant figure it out. here is my following code.
I am attaching photos of my code but didn't copy the bootstrap.css file it can be found here:
https://getbootstrap.com/docs/5.0/getting-started/download/
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-enter code hereprimary">
<div class="container">
<a class="navbar-brand" href="./index.html">
<img src="./imgs/LogoWhitePlain.png" width="35" height="30" class="d-inline-block align-top" alt="DKDESIGNS">
</a>
<!--Logo-->
<div class="collapse navbar-collapse" id="navbarCollapsem">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./aboutMe.html">About Me</a>
</li>
</ul>
</div>
<!--navigation-->
</div>
</nav>
<!--nav bar-->
</header>
<main role="main">
<!--main content-->
<div class="bg-dark container-">
<div class="row">
<div class="col-md-2 col-sm-4">
<img src="imgs/LogoWhite.png" class="my-sm-4" width="175" height="150" class="d-inline-block align-top" alt="">
<!--Logo-->
</div>
<div class="col-md-10 col-sm-8">
<!--<h3 class="display-4 text-primary pt-5"><strong></strong></h3>-->
<h4 class="display-5 pt-3 mt-sm-5">
<em class="text-white text-left">
Designs made easy!
</em>
</h4>
</div>
</div>
</div>
<div class="container my-4">
<div class="row">
<!--first row-->
<div class="col-md-8 col-lg-9">
<h4 class="display-6 text-muted text-capitalize">Our mission</h4>
<p>
Our goal is to simplify the art of designing anything for your business, whether it be
a detailed logo for your company's new look, photogtaphy for an special event or employee photos, a new
website and/or design to be developed for your business, or a design for an advertisements
to attract new customers/clients. We can help to make it easy and efficient, so that you can
focus on the other important aspects of your business. So lets get started on a <u>your</u> project today!
</p>
</div>
<div class="col-md-4 col-lg-3 text-center py-5 bg-primary border border-dark border-3">
<h4 class="text-white">Get your FREE Quote!</h4>
<button class="btn btn-dark">Here</button>
</div>
</div>
</div>
</main>
<footer>
<!--footer content-->
<div class="text-center">
<small class="text-muted text-center">© Daniel Krysty 2021</small>
</div>
<div class="row text-center">
<div class="col-1 offset-2">
<small>
<a class="text-decoration-none text-muted"href="./index.html">Home</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./services.html">Services</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./projects.html">Projects</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./aboutMe.html">About</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./contact.html">Contact</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./websites.html">Websites</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./designs.html">Designs</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./photography.html">Photography</a>
</small>
</div>
</div>
</footer>
</body>
attached css doc
this is to help override the bootstrap.css code I got from the bootsrtap website. I am using the v5.0.2 not sure if that has anything to do with it. I downloaded the compiled css and javascript files. the bootstrap.css file is the one I am using
body {
padding-top: 3rem;
padding-bottom: 3rem;
width: 100%;
/*background-image: url('../imgs/pattern.png');*/
/*background-repeat: repeat;*/
}
.bg-primary {
background-color: rgb(9, 129, 109) !important;
}
.btn-primary {
background-color: rgb(9, 129, 109) !important;
border-color: black !important;
}
.text-primary {
color: rgb(9, 129, 109) !important;
}
.border-primary {
border-color: rgb(9, 129, 109) !important;
}
.jumbotron-detail-skyline {
background: url('../imgs/skykine_BW_new2.jpg') no-repeat fixed;
}
.jumbotron {
height: 30vh;
background-size: cover;
background: black;
width: 100%;
}
main {
margin: auto;
}
You have a hypen - after container class here:
<main role="main">
<!--main content-->
<div class="bg-dark container-">
Remove the hyphen - and try again please.
You will need to use containers for proper align your content. You will need to use .container or .container-fluid for each section according to your needs.
You can try below your code.
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-enter code hereprimary">
<div class="container">
<a class="navbar-brand" href="./index.html">
<img src="./imgs/LogoWhitePlain.png" width="35" height="30" class="d-inline-block align-top" alt="DKDESIGNS">
</a>
<!--Logo-->
<div class="collapse navbar-collapse" id="navbarCollapsem">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./aboutMe.html">About Me</a>
</li>
</ul>
</div>
<!--navigation-->
</div>
</nav>
<!--nav bar-->
</header>
<main role="main">
<!--main content-->
<div class="container-fluid bg-dark">
<div class="row">
<div class="col-md-2 col-sm-4">
<img src="imgs/LogoWhite.png" class="my-sm-4" width="175" height="150" class="d-inline-block align-top" alt="">
<!--Logo-->
</div>
<div class="col-md-10 col-sm-8">
<!--<h3 class="display-4 text-primary pt-5"><strong></strong></h3>-->
<h4 class="display-5 pt-3 mt-sm-5">
<em class="text-white text-left">
Designs made easy!
</em>
</h4>
</div>
</div>
</div>
<div class="container my-4">
<div class="row">
<!--first row-->
<div class="col-md-8 col-lg-9">
<h4 class="display-6 text-muted text-capitalize">Our mission</h4>
<p>
Our goal is to simplify the art of designing anything for your business, whether it be
a detailed logo for your company's new look, photogtaphy for an special event or employee photos, a new
website and/or design to be developed for your business, or a design for an advertisements
to attract new customers/clients. We can help to make it easy and efficient, so that you can
focus on the other important aspects of your business. So lets get started on a <u>your</u> project today!
</p>
</div>
<div class="col-md-4 col-lg-3 text-center py-5 bg-primary border border-dark border-3">
<h4 class="text-white">Get your FREE Quote!</h4>
<button class="btn btn-dark">Here</button>
</div>
</div>
</div>
</main>
<footer>
<div class="container-fluid">
<!--footer content-->
<div class="text-center">
<small class="text-muted text-center">© Daniel Krysty 2021</small>
</div>
<div class="row text-center">
<div class="col-1 offset-2">
<small>
<a class="text-decoration-none text-muted"href="./index.html">Home</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./services.html">Services</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./projects.html">Projects</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./aboutMe.html">About</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./contact.html">Contact</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./websites.html">Websites</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./designs.html">Designs</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./photography.html">Photography</a>
</small>
</div>
</div>
</div>
</footer>
</body>
How to make a layout on bootstrap4, and then I can not. Thank you in advance!
<div class="col-8">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
Now it goes like this
And need to look like this
Using float: left; styling on the columns will give you this effect.
Below I changed the <img> tag to a <div> with a border to give the same visuals since I don't have img.jpg. If you swap those back in it should still work.
I added the styling to the col classes by just adding:
.col-4, .col-8{
float:left;
}
Though, I would recommend adding a class to the outer div's with this styling instead of pigy-backing on bootstrap's classes.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<style>
.small-card {
height: 60px;
width: 100%;
border: solid 2px #333;
}
.large-card{
height: 120px;
width: 100%;
border: solid 2px #333;
}
.col-4, .col-8{
float:left;
}
</style>
<div class="col-8">
<a href="#">
<div class="card">
<div class="large-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
</body>
</html>
I have used bootstrap carousel to show 3 items on a row, and it works on a good way. But I want to show only one item for the small devices(mobiles or tablets). Can anyone help me please?
Here is the code I have used
<section id="services" class="service">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading" style="font-family:daniel; font-weight:bolder; font-size:40px; color:#F9121A;">WorkShops & Tracks</h2>
<hr class="primary">
</div>
</div>
</div><br>
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<div class="container">
<div class="row">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img/img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px"><br><br>
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
</div>
<div class="item">
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
I would use a media query with javascript.
https://www.sitepoint.com/javascript-media-queries/
When I click the Main course, it's showing Main course details.
When I click the Soups, it's not showing Soups details - it's going up.
<div class="clearfix">
<article id="section-1"><h3 class="page-title">Soups</h3>
<p class="woocommerce-result-count pull-left" style="margin-right:30px;">Showing 1–9 of 11 results</p>
<p class="mint-products-per-page pull-left">
<span>View: </span>
18 / 36 / All </p>
</div>
<div class="row">
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products1.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i>
</a>
</div>
<img src="images/products1.jpg" alt="" />
</div>
<div class="product_description center">
<h4 class="product_title">Striped Pants</h4>
<div class="price">$105.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products2.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products2.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products3.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products3.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products1.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products1.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Striped Pants</h4>
<div class="price">$105.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products2.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products2.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products3.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products3.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clearfix">
<article id="section-2"><h3 class="page-title">Main Course</h3>
<p class="woocommerce-result-count pull-left" style="margin-right:30px;">Showing 1–9 of 11 results</p>
</div>
<div class="row">
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products1.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i>
</a>
</div>
<img src="images/products1.jpg" alt="" />
</div>
<div class="product_description center">
<h4 class="product_title">Striped Pants</h4>
<div class="price">$105.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products2.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products2.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products3.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products3.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products1.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products1.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Striped Pants</h4>
<div class="price">$105.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products2.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products2.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="product_item_wrap">
<div class="product_item">
<div class="product_img">
<div class="product_buttons center">
<a class="wish_button" href="javascript:void(0);">Description<br>
You are previewing "Paradise", a premium HTML bootstrap template that will help you design
</a>
<a class="zoom" href="images/products3.jpg" data-gal="prettyPhoto[gal]"><i class="fe icon_search"></i></a>
<a class="add_to_cart_button" href="javascript:void(0);"><i class="glyphicon glyphicon-shopping-cart"></i></a> </div>
<img src="images/products3.jpg" alt="" /> </div>
<div class="product_description center">
<h4 class="product_title">Cargo Pants</h4>
<div class="price">$59.00</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
Hi Here is the what i am using code
I am building a webpage using Twitter Bootstrap. I have a .box class where I put my content. The problem is, that on one of the pages where I have 2 boxes, one of them doesn't have the proper width of the container. The first box is wider than the second one and It doesn't look nice. I think that there will be a problem with an unclosed div or something like that, but I wasn't able to figure that out.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>MG STAV - Reference</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<link href="css/bootstrap-lightbox.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container text-center">
<img class="img-responsive brand-img" src="img/logo.png" alt="">
</div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" id="link" href="index.html">MG STAV stavební, spol. s r.o</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a id="link" href="index.html">Domů</a>
</li>
<li>
<a id="link" href="about.html">O společnosti</a>
</li>
<li>
<a id="link" href="reference.html">Reference</a>
</li>
<li>
<a id="link" href="contact.html">Kontakt</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Naše
<strong>reference</strong>
</h2>
<hr>
</div>
<div class="col-md-5">
<img class="img-responsive img-border-left thumbnail" src="img/banner.jpg" alt="">
</div>
<div class="col-md-7">
<ul class="list-unordered list-reference">
<li>Stavba budovy sociálního zařízení rekreačního areálu Kristýna, Hrádek nad Nisou</li>
<li>Rekonstrukce bytového domu, Horní Počernice</li>
<li>Stavba RD, Stráž pod Ralskem</li>
<li>Stavba RD, Vratislavice nad Nisou</li>
<li>Rekonstrukce RD, Proseč nad Nisou</li>
<li>Rekonstrukce RD, Rychnov u Jablonce nad Nisou</li>
<li>Oprava výrobní haly, Jablonné v Podještědí</li>
<li>Rekontrukce bytového domu, Česká Lípa</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="box">
<div class="row">
<div class="col-sm-12 text-center">
<hr>
<div class="galerie">
<ul class="intro-text text-center">
<li class="active">Rekonstrukce</li>
<li>Zemní práce</li>
<li>Rodinné domy</li>
</ul>
</div>
<hr>
</div>
</div>
<div class="tab-content">
<div class="tab-pane odstavec fade in active" id="rekonstrukce">
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic1.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic2.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic3.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic4.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic5.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic6.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic7.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic1.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic9.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic10.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rekonstrukce/pic11.jpg" alt="">
</a>
</div>
</div>
</div>
<div class="tab-pane odstavec fade" id="rodinne_domy">
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic1.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic2.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic3.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic4.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic5.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic6.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic7.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic8.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic9.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic10.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic11.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic12.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic13.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/rodinne_domy/pic14.jpg" alt="">
</a>
</div>
</div>
</div>
<div class="tab-pane odstavec fade" id="zemni_prace">
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic1.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic2.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic3.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic4.jpg" alt="">
</a>
</div>
<div class="col-sm-4 text-center">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="img-responsive" src="img/zemni_prace/pic5.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-body">
<img src="" alt="" />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © www.mgstav.cz</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-lightbox.js"></script>
</body>
</html>
Here is the webpage, so you could look at what it does: http://www.mgstav.cz/reference.html
I noticed that the footer acts differently than on the other subpages too. I think that the container doesn't apply on the whole content, but I don't know why.
Your "row" and "box" classes are reversed in this section of your code:
<div class="box"><!-- should be "row" -->
<div class="row"><!-- should be "box" -->
<div class="col-sm-12 text-center">
<hr>
<div class="galerie">
<ul class="intro-text text-center">
<li class="active">Rekonstrukce</li>
<li>Zemní práce</li>
<li>Rodinné domy</li>
</ul>
</div>
<hr>
</div>
</div>
And the padding appearing below your home page footer (which is not applied on your sub pages) is coming from a rule in your 'bootstrap-lightbox.css' file:
body {
padding: 30px 0px; /* applies top and bottom padding of 30px */
overflow-y: auto !important;
}
UPDATE: Padding Issue Fix When Modal Window Opens
The easiest way to fix this issue is to override the inline styles I mentioned in the comments below. Add the following style rule to your 'business-casual.css' file:
body.modal-open,
.modal-open .modal {
padding-right: 0 !important;
}