I use Bootstrap V3.3.5. Screen divided in 3 columns horizontal.
Each column has different text length that can be changed by user.
Columns are responsive horizontal (by Bootstrap).
Goal... how to fix: I want same height for those 3 columns -boxes. Each columns-box must have the height of highest column-box.... so all column-boxes have same height.
Except....in Bootstrap "xs" mode, boxes are vertical (there is no problem).
Problem is in "sm, md and lg" mode (Bootstrap) when columns are horizontally next to each other.
EDIT:
I thought the problem was in the text, but it seems to be in the button of a bootstrap MODAL ... so I had not place the modal code in the first code.
I did: place style="white-space: normal;" (to fit text in modal) - seems there is a conflict with this style
Wanted:
Modal buttons height the same in bootstrap sm, md, lg mode (height of largest button)
Text begin at same height
Text fit in button
See snippet in Full-page mode!
Code:
<!doctype html>
<html>
<head>
<style>
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#media (max-width: 768px) {
.row {
flex-wrap: wrap;
}
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<!-- BootsTrap V 3.3.5 -->
<div class="container-fluid">
<div class="row RowHeight" >
<div class="col-xs-12 col-sm-3">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal_1" style="white-space: normal;">
Launch demo modal 11 11 111 111
</button>
<!-- Modal -->
<div class="modal fade" id="myModal_1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel_1">Modal title</h4>
</div>
<div class="modal-body">
...
</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> </div><!-- col2 -->
<!-- Button trigger modal (end) -->
<div class="col-xs-12 col-sm-3">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal_2" style="white-space: normal;">
Launch demo modal 2222 222 222 222 222 222 222 22222222 22 22222 2222
</button>
<!-- Modal -->
<div class="modal fade" id="myModal_2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel_2">Modal title</h4>
</div>
<div class="modal-body">
...
</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> </div><!-- col2 -->
<!-- Button trigger modal (end) -->
</div>
</div>
</body>
</html>
Use flexbox to achieve it, you can easily have the same height for all .box based on the max height column, I made a short example based on your code, take a look:
.box {
background-color: lightgray;
margin-left: 10px;
}
.row{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
<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.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<!-- BootsTrap V 3.3.5 -->
<div class="container-fluid">
<div class="row" >
<!-- for test! -->
<div class="col-xs-4 col-sm-4 box">
<p> Lorem ipsum dolor sit amet</p>
</div>
<div class="col-xs-4 col-sm-4 box">
<p> Lorem ipsum dolor sit amet, consec tetuer adipiscing consec elit.</p>
</div>
<div class="col-xs-4 col-sm-4 box">
<p> Lorem ipsum dolor sit amet, consec tetuer adipis cing elit. Aenean commodo ligula eget dolor. Aenean massa cing.</p>
</div>
</div>
</div>
</body>
You can also try like this:
.box {
background-color: lightgray;
padding: 5px 10px;
min-height: 200px;
}
#media (max-width: 768px) {
.box {
min-height: auto;
margin-bottom: 15px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<!-- for test! -->
<div class="col-xs-12 col-sm-4">
<div class="box">
<p> Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="box">
<p> Lorem ipsum dolor sit amet, consec tetuer adipiscing consec elit.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="box">
<p> Lorem ipsum dolor sit amet, consec tetuer adipis cing elit. Aenean commodo ligula eget dolor. Aenean massa cing.</p>
</div>
</div>
</div>
Can u add this on your onload function `
var heighest = document.getElementsByClassName("box")[0].offsetHeight;
for(i = 1;i<3; i++){
if(heighest < document.getElementsByClassName("box")[i].offsetHeight){
heighest = document.getElementsByClassName("box")[i].offsetHeight;
}
}`
After that u can use heighest
.box {
background-color: lightgray;
height: heighest;
}
The simplest solution is to assign a hardcoded height to your "box" class, based on your highest column-box, for example:
.box {
height: 300px;
}
Other solution could be calculating your highest column box height via JavaScript and assign the same height to the other 2 boxes dynamically, also via JS.
Related
On mobile devices, the Bootstrap modal is not centered correctly when the page is wider than 980px, leaving white space on the right of the screen.
I don't want to use a meta viewport that will zoom the page in as I need the full width to show on mobile devices.
The snippet below is using Bootstrap 5. I tried 3 and 4 too.
You can see in the screenshot that the modal div is positioned out of the screen and the backdrop doesn't cover the full width, leaving white space on the right and also pushing page content (the button) to the left.
<-- invisible whitespace in image
You can see it here with a phone or using chrome mobile device mode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</head>
<body class="text-center">
<style>
body {
width: 1035px;
}
#open-button {
font-size: 32px;
}
</style>
<!-- Button trigger modal -->
<button id="open-button" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<div>
<img src="https://via.placeholder.com/1024" alt="">
</div>
<!-- Modal -->
<div class="modal fade mx-auto" 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>
</body>
</html>
I have 3 columns in my design and I want a modal to be placed inside the second column. And the modal shouldn't move outside the 2nd column when the screen size is changed (only on desktop sizes (1922x1080 - 1280x600) ).
.col{
height:100vh;
}
.column-two{
position:relative;
}
.modal-content {
width: 200px !important; height: 228px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous" />
<div class="row align-items-start">
<div class="col border">
ONE
</div>
<div class="col border column-two">
TWO
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<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>
<div class="col border" >
THREE
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
I'm planning to make the modal position relative and place it inside the column.
Please add below custom css and check agian. i hope your issue will fix by this custom css.
.column-two .modal {
position: absolute;
}
/* for center position */
.column-two .modal.show {
display: flex !important;
}
This would be my solution:
.col{
height:100vh;
}
.column-two{
position:relative;
}
#exampleModal{
position: relative;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous" />
<div class="row align-items-start">
<div class="col border">
ONE
</div>
<div class="col border column-two">
TWO
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<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>
<div class="col border" >
THREE
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
I wanted to create something like this
But my code is coming out to be completely different and I am not able to figure out why.
The image is enlarged and going out of the div. Also if I try to shift the image towards right it instead is going to the left. I think I messed up in the positioning part of the image. How can I fix this issue and why is it happening? Here is my code:
#title {
background-color: #916BBF;
}
.container-fluid {
padding: 3% 15%;
}
/* Download Buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title */
.title-img {
width: 60%;
transform: rotate(25deg);
position: absolute;
}
#features {
padding: 7% 15%;
background-color: #fff;
position: relative;
z-index: 1;
}
.feature-box {
text-align: center;
padding: 5%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- CSS bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- JS bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Title -->
<section id="title">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</section>
</body>
</html>
I went ahead and took your width off your img class and added a few styles. Next steps to achieve this look would be to contain your h1 and buttons on the left and provide a margin left.
EDIT:
I also added a col-sm-6 Bootstrap class to your col-lg-6 to make it mobile responsive. The #media only screen on your img class allows you to adjust the img to make it positioned just right on a different device.
#title {
background-color: #916BBF;
}
.container-fluid {
padding: 3% 15%;
}
/* Download Buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title */
.title-img {
transform: rotate(27deg);
position: absolute;
margin-top: 5rem;
overflow-x: hidden;
}
/* Title Responsive */
#media only screen and (max-width: 900px) {
.title-img {
transform: rotate(27deg);
position: absolute;
margin-top: 5rem;
right: 2rem;
overflow-x: hidden;
}
}
#features {
padding: 7% 15%;
background-color: #fff;
position: relative;
z-index: 1;
}
.feature-box {
text-align: center;
padding: 5%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- CSS bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- JS bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Title -->
<section id="title">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-sm-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6 col-sm-6">
<img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- CSS bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- JS bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<style>
#title {
background-color: #916BBF;
}
.container-fluid {
padding: 3% 15%;
}
/* Download Buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title */
.title-img {
width: 60%;
transform: rotate(25deg);
position: relative;
}
#features {
padding: 7% 15%;
background-color: #fff;
position: relative;
z-index: 1;
margin-top: -128px;
}
.feature-box {
text-align: center;
padding: 5%;
}
</style>
<body>
<!-- Title -->
<section id="title">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-md-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-md-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-md-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</section>
</body>
</html>
I want to remove horizontal lines from my modal
$(document).ready(function(){
$('#myModal').modal('show');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<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>
As you can see there is a line above and below the content
I think you are talking about the borders applied to modal. Use the below code.
.modal-header {
border-bottom: 0 none;
}
.modal-footer {
border-top: 0 none;
}
Its been 2 years since this question was asked and I still don't see any answer with bootstrap so here it is, Just use the border-0 class in the header and footer div. That should do the trick.
<div class="modal-header border-0">
....
</div>
<div class="modal-footer border-0">
....
</div>
Try this...
.no-border{
border:none;
}
and simply add to your class
<div class="modal-header no-border">
To remove these borders, I found it easiest to pass in a custom title component or string.
If you just want to remove the title altogether, set title={null} on props. Then the title and its bottom border will not show. Note this does not remove the close "X" icon.
The same goes for the footer. Passing footer={null} as a prop to removes it entirely (including the buttons). If you still want to show some content in the footer, there is a good example of using custom components in the Ant docs here
In bootstrap 4.5: The modal-header and footer lines are just empty spaces in between.
Actuly, the modal-header and footer and body has no background color.
but when you change it, a separator lines shows up with white color, so we apply the the color to modal-content instead, just like this:
.modal-content
background-color: red// this will hide the white separators
In some bootsrap version:
just add
.modal-footer
border: 0
.modal-header
border: 0
$(document).ready(function(){
$('#myModal').modal('show');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="background-color:red;border: 0;">
<div class="modal-header" style="border: 0;">
<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" style="border: 0;">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
try this:
<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" style='border: none;'>
<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" style='border: none;'>
<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>
check:https://jsfiddle.net/sugandhnikhil/bz82oadf/
Thanks!!!!
This helped me:
.modal-header {
border: none !important;
}
.modal-footer {
border: none !important;
}
I am not sure where I can edit the bootstrap modal pop-up on my portfolio? It is the chili picture in the bottom on this site. At the moment it shows in 1000*600px, but I would like it bigger.
Link to my portfolio
HTML
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<div class="block-image">
<div class="overlay"></div>
<img
class="coursepic"
src="/images/thumbs/image1.jpg"
data-toggle="modal"
data-target="#myModal1"
alt="Trolltunga, Norway"
>
</div>
<div class="block-data">
<h3>
Test
</h3>
</div>
</article>
</div>
CSS
img.coursepic {
width: 100%;
height: 100%;
}
img.coursepic:hover{
cursor: pointer;
opacity: 0.5;
background: rgba(0,0,0,0.5);
border-radius: 2px;
width: 100%;
height: 100%;
}
JS
function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog");
var offset = ($(window).height() - $dialog.height()) / 2;
// Center modal vertically in window
$dialog.css("margin-top", offset);
}
$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
$('.modal:visible').each(centerModal);
});
Its working fine with modal-lg
add this snippet in your centerModal()
$dialog.addClass("modal-lg");
for data-target="#myModal1", the #myModel1 should get modal-lg class
and add class="coursepic modal-lg"
or use this
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Large Modal</h2>
<!-- Trigger the modal with a button -->
<img class="coursepic" data-toggle="modal" data-target="#myModal" src="http://placehold.it/350x150" />
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img class="coursepic" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap does have some built in styles to create modals of different sizes:
The important class here is modal-lg
<div class="modal-dialog modal-lg">
<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>This is a large modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>