I have to add a background image to modal header and it should be responsive as well. I am able to add the image but I am getting issues in making it responsive. Any help appreciated.
Below is the sample snippet.
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(https://s9.postimg.org/ky3v3mduz/Jellyfish.jpg);
height: 208px;
background-size: contain;
background-repeat: no-repeat;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: #hover-blush;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<h2</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
Use a combination of background-size: cover; background-position: center center; assuming you want the center of the image to be the part that is always shown. Otherwise, adjust those as needed to ensure the focal point of the image will be shown.
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(https://s9.postimg.org/ky3v3mduz/Jellyfish.jpg);
height: 208px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: #hover-blush;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<h2</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
To have a responsive background image, what you're looking for is a percentage-based background-size. To completely cover the content area, you would use:
.modal-header {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(https://s9.postimg.org/ky3v3mduz/Jellyfish.jpg);
height: 208px;
background-size: 100% 100%;
background-repeat: no-repeat;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: #hover-blush;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<h2</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
Note that this will distort the image, which may not be what you want. In order to not distort the image, you should only specify a single parameter in background-size, and also tell the background to be fixed to the center:
.modal-header {
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(https://s9.postimg.org/ky3v3mduz/Jellyfish.jpg);
height: 208px;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: #hover-blush;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<h2</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
Ultimately, considering the modal header itself will never change in height, you may want to look into simply using an <img> tag instead of a background-image.
Hope this helps! :)
I think all you need to have is a right size image and changing the background-size to cover.
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(http://www.bahai.org/chrome/img/beliefs/bahaullah-covenant-feature-img.jpg?3e7a0319);
height: 208px;
background-size: cover;
background-repeat: no-repeat;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: #hover-blush;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<h2</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
Related
I have this flex slider to show a customers previous purchases/orders, it uses a "slider" div and inside that is a foreach statement to pull the users previous purchases from a database to produce each "slide" within the slider.
In each slide there is a button to open the modal, which works fine if there is only one item there, but if there is 2-3 items then the display:flex is activated - causing the modal to pop up inside the slider div rather than on top of everything, I believe it has something to do with the position:relative for the "slider" CSS and the position for the modal CSS
and I cant move the modal outside of those divs because the modal needs to be inside the foreach statement so that it pops up with the correct item details (since they are being pulled from a database).
Also, I cant seem to replicate the issue on my PC when I narrow my browser as much as I can (guessing the window doesn't go narrow enough for the issue to occur).
Had this issue a long time, any help is appreciated, thanks
.slider {
width: 100%;
padding: 6px 0px;
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
.slider::-webkit-scrollbar {
display: none;
}
.slide {
border: 1px solid black;
width: 140px;
flex-shrink: 0;
height: 100%;
}
.slider>div {
scroll-snap-align: start;
}
.slider img {
margin: 6px 6px;
}
.modal {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
z-index: 1200 !important;
display: none;
width: 100%;
height: 100%;
overflow-x: hidden !important;
overflow-y: auto !important;
outline: 0;
background-color: rgba(10, 10, 10, 0.45);
}
.modal-backdrop {
display: none !important;
}
.modal-content {
color: black !important;
z-index: 1200 !important;
position: relative;
display: block;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: .3rem;
outline: 0;
}
i.fa-ellipsis-v {
border-radius: 60px;
box-shadow: 0 0 2px #888;
padding: 0.5em 0.6em;
font-size: 14px;
}
i.fa-ellipsis-v:hover {
cursor: pointer;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" id="bootstrap-css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<div class="slider">
<div class="slide" id="slide-1">
<img src="/images/products/<?php echo $ditt['prodimage'];?>">
<i data-toggle="modal" data-target="#exampleModal-1"></i>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:64px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
</div>
<div class="modal-body">
<img src="/images/products/<?php echo $ditt['prodimage']; ?>">
<br>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="slide" id="slide-2">
<img src="/images/products/<?php echo $ditt['prodimage'];?>">
<i data-toggle="modal" data-target="#exampleModal-2"></i>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:64px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
</div>
<div class="modal-body">
<img src="/images/products/<?php echo $ditt['prodimage']; ?>">
<br>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="slide" id="slide-3">
<img src="/images/products/<?php echo $ditt['prodimage'];?>">
<i data-toggle="modal" data-target="#exampleModal-3"></i>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal-3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:64px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
</div>
<div class="modal-body">
<img src="/images/products/<?php echo $ditt['prodimage']; ?>">
<br>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
If you’re wanting the modal above all other elements in the window you can use position:fixed and z-index:99999
.modal{
position:fixed;top:calc(50% - 200px);left:calc(50% - 250px);width:500px;height:400px:z-index:99999;
}
First of all set these attributes
.Modal{
position:absolute
}
.slider{
position:relative
top:0; //as default to overwrite browser defaults for non-static elements
left:0;//as default to overwrite browser defaults for non-static elements
}
Now Your .Modal will be visible in constraints of .slider.
Anyway if Your .Modal be visible out of the .slider
edit .slider{overflow} value
or
YOu can set .modal{position:fixed } or YOu can put YOur .modal out of .slider :
<div class="Modal></div><div class="slider>...</div>
Prevent from using z-index - it's unintuitive.
Z-index is worth just for dynamic purpose, like programaticly switching visible images layed out in the same constraints.
By the way
here You can figure out Your snippet to be reproducable.
Just a modal using the bootstrap classes:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" id="bootstrap-css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- 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>
Bootstrap carousel with modal
.outer-container {
display: flex;
flex-direction: column;
}
.main-container {
border: solid yellow 2px;
padding: 1rem;
}
#carouselExampleControls {
border: solid green 1px;
display: flex;
background-color: #88dd8811;
}
.modal-container {
display: block;
height: 8rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" id="bootstrap-css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="outer-container">
<div class="other-container">Other container</div>
<div class="main-container">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators bg-success">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="modal-container d-flex flex-row p-3 justify-content-center align-items-center">
<div class="me-2">Happy people modal here:</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary w-25 me-1" data-bs-toggle="modal" data-bs-target="#firstModal">
Launch FIrst modal
</button>
<!-- Modal -->
<div class="modal fade modal-centered" id="firstModal" tabindex="-1" aria-labelledby="firstModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="firstModalLabel">Big Dog title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<span class="ms-5 p-3 text-white bg-warning">I am a big dog!</span>
</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>
<!-- end of first modal -->
<div class="modal-container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalTwo">
Launch demo modal two
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalTwo" tabindex="-1" aria-labelledby="exampleModalTwoLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalTwoLabel">Modal two title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<span> I am a fish!</span>
</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>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="modal-container m-3">I will hold a modal</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="modal-container m-3">I will hold a modal</div>
</div>
</div>
<button class="carousel-control-prev text-primary" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon bg-primary" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next text-success" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon bg-primary" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
Original example:
.slider {
width: 100%;
padding: 6px 0px;
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
.slider::-webkit-scrollbar {
display: none;
}
.slide {
border: 1px solid black;
width: 140px;
flex-shrink: 0;
height: 100%;
}
.slider>div {
scroll-snap-align: start;
}
.slider img {
margin: 6px 6px;
}
.modal {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
z-index: 1200 !important;
display: none;
width: 100%;
height: 100%;
overflow-x: hidden !important;
overflow-y: auto !important;
outline: 0;
background-color: rgba(10, 10, 10, 0.45);
}
.modal-backdrop {
display: none !important;
}
.modal-content {
color: black !important;
z-index: 1200 !important;
position: relative;
display: block;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: .3rem;
outline: 0;
}
i.fa-ellipsis-v {
border-radius: 60px;
box-shadow: 0 0 2px #888;
padding: 0.5em 0.6em;
font-size: 14px;
}
i.fa-ellipsis-v:hover {
cursor: pointer;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" id="bootstrap-css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Slider does not run and style seems to have no effect on it
<div class="slider">
<div class="slide" id="slide-1">
<img src="/images/products/<?php echo $ditt['prodimage'];?>" alt="prodimage1">
<i class="bi-bag-fill" style="font-size: 3rem; color: orange;" data-toggle="modal" data-bs-toggle="modal" data-bs-target="#exampleModal-1"></i>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:64px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
</div>
<div class="modal-body">
<img src="/images/products/<?php echo $ditt['prodimage']; ?>" alt="prodimage1">
<br>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="slide" id="slide-2">
<img src="/images/products/<?php echo $ditt['prodimage'];?>" alt="prodimage2">
<i class="bi-bag-fill" style="font-size: 3rem; color: orange;" data-bs-toggle="modal" data-bs-target="#exampleModal-2"></i>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:64px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
</div>
<div class="modal-body">
<img src="/images/products/<?php echo $ditt['prodimage']; ?>" alt="prodimage2">
<br>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="slide" id="slide-3" data-bs-target="#exampleModal-3">
<img src="/images/products/<?php echo $ditt['prodimage'];?>" alt="prodimage3">
<i class="bi-bag-fill" style="font-size: 3rem; color: orange;"data-bs-toggle="modal" data-bs-target="#exampleModal-3"></i>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal-3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:64px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
</div>
<div class="modal-body">
<img src="/images/products/<?php echo $ditt['prodimage']; ?>" alt="prodimage3">
<br>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
I have a bootstrap 4 modal that I wish to display a little different. I want to display a floating box off to the left of the modal.
My question is how can I position both the modal and the floated box in the center of the page, even though the floating box is sitting outside the modal with a position absolute?
This is what it looks like currently, the floated box has a position absolute with a negative left position:
This is how I want it to look like, with the box and modal centered:
I don't know how much I have to modify the modal to do this, as I am hoping to make it responsive as well.
Would anyone have any ideas on how I could achieve this? It would be much appreciated.
Thanks, guys.
.affix-box {
position: absolute;
top: -40px;
left: -100px;
width: 200px;
height: 100px;
background-color: green;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="affix-box"></div>
<div class="modal-header">
<h5 class="modal-title ml-auto" 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>
</div>
Add width: 91%; and left: 9%; to modal-content
.affix-box {
position: absolute;
top: -40px;
left: -100px;
width: 200px;
height: 100px;
background-color: green;
}
.modal-content{
width: 91%;
left: 9%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="affix-box"></div>
<div class="modal-header">
<h5 class="modal-title ml-auto" 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>
</div>
Here is the simple replacement.
instead of top and left i have used transform: translate(-50%, -50%); which sets the center of the floating box on the top left corner of modal.
.affix-box {
position: absolute;
width: 200px;
height: 100px;
background-color: green;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="affix-box"></div>
<div class="modal-header">
<h5 class="modal-title ml-auto" 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>
</div>
In addition to what #Joykal has said, you can also try changing the model size to reduce its width, you can use .modal-sm or .modal-lg class instead of .modal-xl depending on your need
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
May be this will help you
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
#myModal .close{
display: none;
}
</style>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$("#myModal").modal('show');
$("#myModal2").modal('show');
});
$(".close,.close-btn").click(function(){
$("#myModal").modal('hide');
$("#myModal2").modal('hide');
});
});
</script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn">Basic</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" style="right: 50%;">
<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">
<p>Some text in the modal.</p>
</div>
</div>
</div>
</div>
<!--/. Modal -->
<!-- Modal -->
<div class="modal fade" id="myModal2" role="dialog" style="left: 50%;">
<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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close-btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--/. Modal -->
</div>
</body>
</html>
I have the following HTML with navbar, 3 column body and a large footer bar. I have included a button on the navbar clicking which a modal should pop up. I have used the basic example given in the WS schools as a demo one. The WSS demo works flawlessly when I run it as a standalone page. However, when I include the same example in my html, the modal is not popping up. I have included the script in JSFiddle too https://jsfiddle.net/3Lonzx1f/2/.
I am including the same below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- View meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
DEMO
</title>
<!-- Color CSS Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<script src="https://use.fontawesome.com/f87c84f770.js"></script>
<script src="jtree.js"></script>
<style type="text/css">
body, html, .sidebar, .body .rhsbar{
height: 100%;
min-height: 100%;
}
html, body {overflow:auto}
body { padding-bottom: 200px; }
#container{
width:100%;
height:100%;
/* position:absolute; */
}
.sidebar{
width:25%;
float:left;
height:100%;
border-right: solid 6px #f1ded9;
overflow-y: auto;
}
.body{
background-color: white;
float:left;
width:50%;
height:100%;
}
.rhsbar1{
background-color: white;
float:right;
width:25%;
height:10%;
border-left: solid 6px #f1ded9;
overflow-y: auto;
}
.rhsbar2{
background-color: white;
float:right;
width:25%;
height:90%;
border-left: solid 6px #f1ded9;
border-top: solid 6px #f1ded9;
}
.rhsbar2 .xmldirectories{
margin-top: 50px;
padding:2px;
}
.navbar {
height: 20px;
position: absolute;
background-color: black;
width:100%;
border-bottom: solid 6px #f1ded9;
z-index:999;
}
#loaded_img_panel {
display:block;
height: 200px;
position: relative;
background-color: white;
overflow: auto;
white-space: nowrap;
border-top: solid 6px #f1ded9;
}
</style>
</head>
<body>
<div class="navbar">
<div class="col-sm-1" style="padding:10px 0 0 0;color:white;">
</div>
<div class="col-sm-1" style="padding:5px">
</div>
<div class="col-sm-1" style="padding:5px">
</div>
<div class="col-sm-3" style="padding:5px 0 0 0;color:white;">
</div>
<div class="col-sm-1" style="padding:5px">
</div>
<div class="col-sm-2" style="padding:5px">
</div>
<div class="col-sm-1" style="padding:10px;color:white;">
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Open Modal</button>
</div>
<div class="col-sm-1" style="padding: 5px 0px 0px 0px;color:white;">
</div>
<div class="col-sm-1" style="padding:10px;text-align:right;color:white;text-decoration:none;">
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Php code to list all the match sub folders -->
<div id="container">
<div class="sidebar">
</div>
<div class="body">
</div>
<div class="rhsbar1">
</div>
<div class="rhsbar2">
</div>
</div>
<div id="loaded_img_panel" name="loaded_img_panel" class="dragscroll" >
</div>
</body>
</html>
Can someone help please?
This is because you are missing the bootstrap3 javascript library. Just add this library below your jQuery script tag
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Updated Fiddle
I have a button and a modal which is opening on button click.
When I hover on button then its background color is slightly changed. When I click on button then a modal is opening. But when I close the modal and hover on button then I don't get hover effect which I was getting before clicking on button.
.btn-info.focus, .btn-info:focus {
color: #fff;
background-color: #000 !important;
border-color: #fff !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info height_30 pull-right margin_right_10 mail_download_csv_btn" data-toggle="modal" data-target="#mail_pdf">Mail PDF</button>
<div class="modal fade" id="mail_pdf" 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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
that is because of this:
.btn-info.focus, .btn-info:focus {
color: #fff;
background-color: #31b0d5;
border-color: #1b6d85;
}
override it with your custom css. make the :hover !important so it surely override the :focus rules;
body .btn-info.focus, body .btn-info:focus {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-info:hover {
color: #fff;
background-color: #31b0d5 !important;
border-color: #269abc !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info height_30 pull-right margin_right_10 mail_download_csv_btn" data-toggle="modal" data-target="#mail_pdf">Mail PDF</button>
<div class="modal fade" id="mail_pdf" 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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
.btn-info.focus, body .btn-info:focus {
color: #fff;
background-color: #5bc0de;
}
.btn-info.focus:hover, body .btn-info:focus:hover {
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<button type="button" class="btn btn-info height_30 pull-right margin_right_10 mail_download_csv_btn" data-toggle="modal" data-target="#mail_pdf">Mail PDF</button>
<div class="modal fade" id="mail_pdf" 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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It's because, when you close the modal, the focus was still on the button and you have custom class for button focus which sets it to black. removing that class may help.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info height_30 pull-right margin_right_10 mail_download_csv_btn" data-toggle="modal" data-target="#mail_pdf">Mail PDF</button>
<div class="modal fade" id="mail_pdf" 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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I am having trouble to align my image to the navbar correctly its slightly to the side. I am trying to set it out so that it fits with the navbar together in the white area.
So when you click on the image the navbar pops up below it.
body {
font-family: 'Arimo', sans-serif;
padding-top: 50px;
}
.menu-bar {
position: absolute;
top: 20px;
left: 50%;
height: 14px;
margin-left: -10px;
}
.logo {
width: 100px;
height: 50px;
}
.menu {
display: none;
width: 100%;
padding: 30px 10px 50px;
margin: 0 auto;
text-align: center;
background-color: #fff;
}
.menu ul {
margin-bottom: 0;
}
.menu a {
color: #333;
text-transform: uppercase;
opacity: 0.8;
}
.menu a:hover {
text-decoration: none;
opacity: 1;
}
/*deviders*/
.home{
height: 100%;
padding-top: 150px;
text-align: center;
background: #423840;
}
.about {
height: 100%;
padding-top: 150px;
text-align: center;
background: #8dd8f8;
}
.service {
height: 100%;
padding-top: 150px;
text-align: center;
background: #9D714F;
}
.info{
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.contact {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="js/custom.js"></script>
</head>
<body class="scroll-area" data-spy="scroll" data-offset="0">
<a class="menu-bar" data-toggle="collapse" href="#menu">
<img src="http://i.imgur.com/Bu0B6O8.png" alt="Logo" class = "logo">
</a>
<div class="collapse menu" id="menu">
<ul class="list-inline">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>Contact</li>
</ul>
</div>
<section id="home" class="home">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Home</h1>
</div>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Profolio</h1>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" 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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="service" class="service">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Service</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="info" class="info">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Info</h1>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact us</h1>
</div>
</div>
</div>
</section>
</body>
You need to make little change in your css, Just replace the below css code. I hope it work for you.
.menu-bar {
top: 20px;
margin: 0 auto;
display: table;}