I'm trying to add a modal when the user clicks on the 'Add' button under 'Categories.' When I use just the code for the modal in js fiddle, it works, but when I add all of the code from the current file, it doesn't. Have tried moving jquery cdn around and also making a separate div container for the modal, but not able to get it. Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js"
integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"
integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
rel="stylesheet"
/>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<!-- Navbar -->
<?php include_once("./templates/header.php"); ?>
<br /><br />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mx-auto">
<img
src="./images/user.png"
style="width: 60%"
class="card-img-top mx-auto"
alt="Card image cap"
/>
<div class="card-body">
<h4 class="card-title">Profile Info</h4>
<p class="card-text">
<i class="fa fa-user"> </i>Brian Liang
</p>
<p class="card-text"><i class="fa fa-user"> </i>Admin</p>
<p class="card-text">Last Login : xxxx-xx-xx</p>
<a href="#" class="btn btn-primary"
><i class="fa fa-edit"> </i>Edit Profile</a
>
</div>
</div>
</div>
<div class="col-md-8">
<div class="jumbotron" style="width: 100%; height: 100%">
<h1>Welcome Admin,</h1>
<div class="row">
<div class="col-sm-6">
<iframe
src="http://free.timeanddate.com/clock/i7l8nwj9/n199/szw160/szh160/hoca32/hbw10/hfcc00/cf100/hnca32/fas30/facfff/fdi86/mqcfff/mqs2/mql3/mqw4/mqd70/mhcfff/mhs2/mhl3/mhw4/mhd70/mmcfff/mml4/mmw4/mmd98/hhcfff/hhs2/hmcfff/hms2/hscfff"
frameborder="0"
width="160"
height="160"
></iframe>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">New Orders</h4>
<p class="card-text">
Here you can make new invoices and create new orders.
</p>
New Orders
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Categories</h4>
<p class="card-text">
Here you can manage your categories and can add parent and sub
categories
</p>
<a
href="#"
data-toggle="modal"
data-target="#exampleModal"
class="btn btn-primary"
>Add</a
>
Manage
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Brands</h4>
<p class="card-text">
Here you can manage your brand and can add a new brand
</p>
Add
Manage
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Products</h4>
<p class="card-text">
Here you can manage your products and can add new products
</p>
Add
Manage
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="row">
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The code that you useis only available for Bootstrap 4, but in the header, you are including the Bootstrap 5 that have changed some parameters regarding modals :
To trigger a modal:
// OLD WAY
data-toggle="modal"
data-target="#exampleModal"
// NEW WAY
data-bs-toggle="modal"
data-bs-target="#exampleModal"
Declaring a modal :
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js"
integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"
integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
rel="stylesheet"
/>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<!-- Navbar -->
<?php include_once("./templates/header.php"); ?>
<br /><br />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mx-auto">
<img
src="./images/user.png"
style="width: 60%"
class="card-img-top mx-auto"
alt="Card image cap"
/>
<div class="card-body">
<h4 class="card-title">Profile Info</h4>
<p class="card-text">
<i class="fa fa-user"> </i>Brian Liang
</p>
<p class="card-text"><i class="fa fa-user"> </i>Admin</p>
<p class="card-text">Last Login : xxxx-xx-xx</p>
<a href="#" class="btn btn-primary"
><i class="fa fa-edit"> </i>Edit Profile</a
>
</div>
</div>
</div>
<div class="col-md-8">
<div class="jumbotron" style="width: 100%; height: 100%">
<h1>Welcome Admin,</h1>
<div class="row">
<div class="col-sm-6">
<iframe
src="http://free.timeanddate.com/clock/i7l8nwj9/n199/szw160/szh160/hoca32/hbw10/hfcc00/cf100/hnca32/fas30/facfff/fdi86/mqcfff/mqs2/mql3/mqw4/mqd70/mhcfff/mhs2/mhl3/mhw4/mhd70/mmcfff/mml4/mmw4/mmd98/hhcfff/hhs2/hmcfff/hms2/hscfff"
frameborder="0"
width="160"
height="160"
></iframe>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">New Orders</h4>
<p class="card-text">
Here you can make new invoices and create new orders.
</p>
New Orders
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Categories</h4>
<p class="card-text">
Here you can manage your categories and can add parent and sub
categories
</p>
<a
href="#"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>Add</a
>
Manage
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Brands</h4>
<p class="card-text">
Here you can manage your brand and can add a new brand
</p>
Add
Manage
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Products</h4>
<p class="card-text">
Here you can manage your products and can add new products
</p>
Add
Manage
</div>
</div>
</div>
</div>
<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You are probably getting your bootstrap versions mixed up. I have tested your code using bootstrap 4 and bootstrap 5 and can confirm it works on bootstrap 4 but does not on bootstrap 5, you can fix your code easily by replacing your bootstrap 5 script imports with bootstrap 4, or you can port your code to bootstrap 5.
Bootstrap 5 recently changed the way modals are triggered, which is why it does not work on 5 but does work on 4.
The following head works for me
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
Related
I have a bootstrap modal and it is not showing
I've tried using different cdns, reusing code from the internet but nothing worked. When I try some other bootstrap cdn is messing up my css and everything goes wrong. Can somebody please tell me how and what to do.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" href="image/icons/h2d_color.ico" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://kit.fontawesome.com/b9f85d60dc.js" crossorigin="anonymous"></script>
<script src="jquery-3.4.1.min.js"></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>
</head>
<body>
<a data-toggle="modal" data-target="#myModal" href="#myModal">
<div class="col-xs-3 cards-item cardTipove">
<div class="cardsHeading">
<h2>ТИПОВЕ</h2>
</div>
</div>
</a>
</body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<a href="projector.html" class="cardsLink">
<div class="col-xs-3 cards-item cardProjector">
<div class="cardsHeading">
<h2>ПРОЖЕКТОР</h2>
</div>
</div>
</a>
<a href="generator.html" class="cardsLink">
<div class="col-xs-3 cards-item cardGenerator">
<div class="cardsHeading">
<h2>ГЕНЕРАТОР/МАНИФЕСТИРАЩ ГЕНЕРАТОР</h2>
</div>
</div>
</a>
<a href="manifestor.html" class="cardsLink">
<div class="col-xs-3 cards-item cardManifestor">
<div class="cardsHeading">
<h2>МАНИФЕСТОР</h2>
</div>
</div>
</a>
<a href="reflector.html" class="cardsLink">
<div class="col-xs-3 cards-item cardReflector">
<div class="cardsHeading">
<h2>РЕФЛЕКТОР</h2>
</div>
</div>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
it must show my modal, but nothing happens
You need to include the boostrap.js file
<head>
....
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
https://jsfiddle.net/bzon481d/
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" href="image/icons/h2d_color.ico" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://kit.fontawesome.com/b9f85d60dc.js" crossorigin="anonymous"></script>
<script src="jquery-3.4.1.min.js"></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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<a data-toggle="modal" data-target="#myModal" href="#myModal">
<div class="col-xs-3 cards-item cardTipove">
<div class="cardsHeading">
<h2>ТИПОВЕ</h2>
</div>
</div>
</a>
</body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<a href="projector.html" class="cardsLink">
<div class="col-xs-3 cards-item cardProjector">
<div class="cardsHeading">
<h2>ПРОЖЕКТОР</h2>
</div>
</div>
</a>
<a href="generator.html" class="cardsLink">
<div class="col-xs-3 cards-item cardGenerator">
<div class="cardsHeading">
<h2>ГЕНЕРАТОР/МАНИФЕСТИРАЩ ГЕНЕРАТОР</h2>
</div>
</div>
</a>
<a href="manifestor.html" class="cardsLink">
<div class="col-xs-3 cards-item cardManifestor">
<div class="cardsHeading">
<h2>МАНИФЕСТОР</h2>
</div>
</div>
</a>
<a href="reflector.html" class="cardsLink">
<div class="col-xs-3 cards-item cardReflector">
<div class="cardsHeading">
<h2>РЕФЛЕКТОР</h2>
</div>
</div>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Morning,
Can anyone shed any light on where I'm going wrong here please? I'm trying to anchor an image on index.html to modal content on mainportfolio.html. My link on index.html looks like this:
<div class="col-md-4 col-sm-6">
<a href="mainportfolio2.html#portfolioModal93">
<img class="img-responsive img-portfolio img-hover" src="img/homePage/700x450image.png"></a>
</div>
And I want that to open this, which is on mainportfolio2.html:
<div class="portfolio-modal modal fade" id="portfolioModal93" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Image</h2>
<p class="item-intro text-muted">Example text</p>
<p>More example text</p>
<img class="img-responsive img-centered" src="img/image1.jpg" alt="">
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Window</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
However, all that happens is that you're redirected to the top of the portfolio page. I've tried adding the full url to the link on index.html, which didn't work, and I've tried a forwards slash between
"mainportfolio2.html/#portfolioModal93"
Which serves up a 404 error. This seems like it should be very simple and yet I can't figure it out.
Can anyone help?
Thanks in advance.
Opening a Bootstrap modal is a javascript event. You'd need to add some javascript to detect that the page should open the modal, and then to actually open the modal.
index.html
<div class="col-md-4 col-sm-6">
<a href="http://test.dev/mainportfolio2.html#portfolioModal93">
<img class="img-responsive img-portfolio img-hover" src="img/homePage/700x450image.png">
</a>
</div>
mainportfolio2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="portfolio-modal modal fade" id="portfolioModal93" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Image</h2>
<p class="item-intro text-muted">Example text</p>
<p>More example text</p>
<img class="img-responsive img-centered" src="img/image1.jpg" alt="">
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Window</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
// get the current URL
var url = $(location).attr('href');
// if the URL ends with the anchor #portfolioModal93 then we want to open the modal
if(url == 'http://test.dev/mainportfolio2.html#portfolioModal93') {
$('#portfolioModal93').modal('show');
}
});
</script>
</body>
</html>
I tried to make a popup window with bootstrap. I modified some codes from a template. It should have 3 columns. 1st column picture, 2nd column text and 3rd column is price and button+icon. This is going to be a list with several similar rows. Here I just put one row to make simple. The footer is going to be some text. The problem is I can't get the 3rd column to the right position. I tried with clearfix, etc. Any suggestions?
Please note that, these codes have several unsolved issue. Please ignore those things. That's not the first priority. Tks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Wish List</h4>
</div>
<div class="modal-body">
<div class="col-lg-3 col-md-4 col-xs-4 ">
<a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
</a>
</div>
<div "col-lg-3 col-md-4 col-xs-4 clearfix">
<p >Product Title</p>
<p class="text-warning"><small>Description.dfdasfjsadfdasldfdslafjlsadfsldfjsdljf</small></p>
</div>
<div class="col-lg-3 col-md-4 col-xs-4 clearfix" >
<p>price$6.99</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
<span class="glyphicon glyphicon-trash"></span>
</div>
</div>
<div class="modal-footer">
<span> view of 1-5 of </span>
<select>
<option value="5">5</option>
<option value="5">10</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
you have to add a 'row' , and forgot a 'class=' , and you can remove the clearfix
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Wish List</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-4 ">
<a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-4 clearfix">
<p >Product Title</p>
<p class="text-warning"><small>Description.dfdasf jsadfdasld fdslafjlsadf sldfjsdljf</small></p>
</div>
<div class="col-lg-3 col-md-4 col-xs-4 clearfix" >
<p>price$6.99</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
<span class="glyphicon glyphicon-trash"></span>
</div>
</div>
</div>
<div class="modal-footer">
<span> view of 1-5 of </span>
<select>
<option value="5">5</option>
<option value="5">10</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
Mainly it's number 1 below, but here are a couple other things to consider:
You left out the keyword class in the markup for the second column. This is pretty important.
You don't really need the clearfix class. If you wrap the whole thing in a row div then it will do the line breaking for you pretty well.
The columns should always add up to 12 - when you have three col-lg-3s you'll end up with something that is left-aligned and only takes up 3/4ths of the modal.
The columns for the smaller screen sizes will get bumped up to the next ones, so col-xs-4 col-sm-4 col-md-4 col-lg-3 is the same as saying col-xs-4 col-lg-3. The less CSS rules that need to be applied for the same result the better.
In your example you have a really long word in the description, which causes it to overflow into the next column. You might want to account for that situation by playing around with things like word-wrap and text-overflow.
$(document).ready(function() {
$("#myModal").modal('show');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Wish List</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-4">
<a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
</a>
</div>
<div class="col-xs-4">
<p>Product Title
</p>
<p class="text-warning"><small>Description.dfdasfjsadfdasldfdslafjlsadfsldfjsdljf</small>
</p>
</div>
<div class="col-xs-4">
<p>price$6.99</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
<span class="glyphicon glyphicon-trash"></span>
</div>
</div>
</div>
<div class="modal-footer">
<span> view of 1-5 of </span>
<select>
<option value="5">5</option>
<option value="5">10</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
I'm new to coding with Bootstrap 3, I've been developing the homepage below, however my Dropdown menu in the navbar and my modals on the homepage have stopped working.
My other page also has a modal which does work, so I'm not sure as to what the difference is.
Can anyone help?
Here's my code:
<!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">
<title>Spark Media Arts</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<a class="navbar-brand" href="#">Spark Media Arts</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>ABOUT</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle">PORTFOLIO<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Graphic Design</li>
<li class="divider"></li>
<li>Video Production</li>
</ul></li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron text-center">
<h1>Spark Media Arts</h1>
<p>"Inspiring Creativity through Media ..."</p>
Book A Workshop
How To Hire Us
</div>
<div class="row">
<div class="col-sm-4">
<img src="img/thumbs/gdshow.jpg" alt="Graphic Design Showreel">
<h3>Graphic Design Showreel</h3>
<p>Year of production: 2014<br>
Running Time: 1:35 min<br>
Produced for: Spark Media Arts<br>
<br>Over the course of our first year, we've had the opportunity to produce artwork for various and some of their work and events.</p>
Read More
</div>
<div class="col-sm-4">
<img src="img/thumbs/vpshow.jpg" alt="Video Production Showreel">
<h3>Video Production Showreel</h3>
<p>Year of production: 2014<br>
Running Time: 3:09 min<br>
Produced for: Spark Media Arts<br>
<br>Over the course of our first year, we've had the opportunity to produce videos for various and some of their work and events.</p>
Read More
</div>
<div class="col-sm-4">
<img src="img/thumbs/sppromo.jpg" alt="SP Project Promo 2014">
<h3>SP Project Promo 2014</h3>
<p>Year of production: 2014<br>
Running Time: 2:37 min<br>
Produced for: SP Project<br>
<br>Promotional Video for SP Project, an organisation working across the North East region in the UK.</p>
Read More
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>© 2014 Spark Media Arts.</p>
</div>
<div class="navbar-text pull-right">
<p>Get in touch:
<img src="img/social_icons/email.png">
<img src="img/social_icons/facebook.png">
<img src="img/social_icons/google-plus.png">
<img src="img/social_icons/twitter.png">
<img src="img/social_icons/vimeo.png">
<img src="img/social_icons/youtube.png">
</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form">
<div class="modal-header">
<h4>Contact</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contact-name" placeholder="First and Last Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="contact-email" placeholder="example#domain.com">
</div>
</div>
<div class="form-group">
<label for="contact-message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4">
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="book_workshop" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Book A Workshop</h4>
</div>
<div class="modal-body">
<p>Text coming soon!</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="hire_us" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>How To Hire Us</h4>
</div>
<div class="modal-body">
<p>Text coming soon!</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="hire_us" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>How To Hire Us</h4>
</div>
<div class="modal-body">
<p>Text coming soon!</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="hire_us" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>How To Hire Us</h4>
</div>
<div class="modal-body">
<p>Text coming soon!</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I am trying to use Twitter Bootstrap Light-box.
My code :
<html>
<head>
<title>LightBox</title>
<link rel="stylesheet" href="bootstrap-combined.min.css" />
<link rel="stylesheet" href="bootstrap-lightbox.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h2>HELLO</h2>
<div id="lightBoxId" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-content">
<img src="cubsimba141.gif" />
<div class="lightbox-caption">
<p>This is test image</p>
</div>
</div>
</div>
<a data-toggle="lightbox" href="#lightBoxId" class="span2 thumbnail">
<img src="cubsimba141.gif" />
</a>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-lightbox.js"></script>
</body>
</html>
Above code able to show me Light-Box after clicking on thumbnail image. When I click outside that light box it's need to hide that light-box, but it's not working for me.
UPDATE I fixed your code. I had to change the html for the modal. Have a look at this updated link. Also attaching the code below.
Javascript
$(document).ready(function(){
$(".toggle-modal").click(function(){
$("#myModal").modal('toggle');
});
});
HTML
<h1>Modal Simple Demo</h1>
<!-- Button HTML (to Trigger Modal) -->
Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
It seems that you forgot to make it functional with javascript. I created this demo. Have a look... Demo Link.