i am using bootsrap 5 modal.i try to use bootstrap grig system inside the modal,but when is use grid system there are margins between modal body and grids.how can i remove these margins?any help will be highly appreciated
Add class p-0 on your .modal-body that will set all this white padding to out.
and then add class mx-0 on the raw
.col-8{
background: red;
}
.col-4{
background: green;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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>
<!-- 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 rounded">
<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 p-0">
<div class="row mx-0">
<div class="col-8 px-0">...</div>
<div class="col-4 px-0">...</div>
</div>
</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>
Related
Buttons are inputs fields are not getting displayed on modal inside .aspx page but labels are visible
<div class="modal inmodal" id="mdl_filter" tabindex="-1" role="dialog" aria-hidden="true" style="position: absolute;">
<div class="modal-dialog modal-lg">
<div class="modal-content animated bounceInRight">
<div class="modal-header" style="height: 55px; padding-top: 10px">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Filter</h4>
</div>
<div class="modal-body">
<div class="tab-content">
<div class="space-10"></div>
<div id="filter_form" class="wizard-big filter_form">
<div class="step-content">
<div class="row">
<div class="col-lg-8">
<div class="form-group">
<label>By Number</label>
<input id="txt_filter_number" name="txt_filter_number" type="text" class="form-control" runat="server" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>
</div>
</div>
</div>
</div>
</div>
Output (missing buttons and input fields):
It looks like your .modal-footer div is inside the .modal-body div. The bootstrap documentation has an example that shows the footer div outside of the body div
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I tried the same html for the modal popup that you reported and its working perfectly. I think you are missing css or other css are hiding your modal elements. have a look here:
function showModal()
{
$('#mdl_filter').modal('show');
}
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.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>
<input type="button" id="btnShow" onclick="showModal();" value="Show Modal"/>
<div class="modal inmodal" id="mdl_filter" tabindex="-1" role="dialog" aria-hidden="true" style="position: absolute;">
<div class="modal-dialog modal-lg">
<div class="modal-content animated bounceInRight">
<div class="modal-header" style="height: 55px; padding-top: 10px">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Filter</h4>
</div>
<div class="modal-body">
<div class="tab-content">
<div class="space-10"></div>
<div id="filter_form" class="wizard-big filter_form">
<div class="step-content">
<div class="row">
<div class="col-lg-8">
<div class="form-group">
<label>By Number</label>
<input id="txt_filter_number" name="txt_filter_number" type="text" class="form-control" runat="server" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
I am creating a confirm dialog using Bootstrap 4 and the code goes like this
<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Navigation</h4>
</div>
<div class="modal-body">
<p>You haven't saved your changes. Are you sure you want to leave this page?</p>
</div>
<div class="modal-footer">
<div class="order-2"><button class="btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button></div>
<div class="mr-auto order-1"><button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button></div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
The styling is working fine in chrome, firefox, edge but not working in IE
Chrome
IE11
Created a fiddle for the same.
Try the following HTML structure for "modal-footer"
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Navigation</h4>
</div>
<div class="modal-body">
<p>You haven't saved your changes. Are you sure you want to leave this page?</p>
</div>
<div class="modal-footer justify-content-start">
<button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button>
<button class="ml-auto btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
display flex is not full support in IE.
i change footer display flex to block, then its work. check bellow code
<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Navigation</h4>
</div>
<div class="modal-body">
<p>You haven't saved your changes. Are you sure you want to leave this page?</p>
</div>
<div class="modal-footer d-block">
<div class="row">
<div class="col-sm-6"><button class="btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button></div>
<div class="col-sm-6 text-right"><button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
I have a two column Bootstrap layout on small screens and up. For the extra small size class, I'd like to hide the second column from the normal flow, and instead use it as the contents for a modal.
Is that possible in an elegant way (i.e. without moving it around the DOM with Javascript)?
Example:
<div class="row">
<!-- Main Column -->
<div class="col-sm-8 col-md-9">
Main contents blah blah blah
</div>
<!-- Secondary Column -->
<div class="col-sm-4 col-md-3">
Other contents. These appear normally in sm, md, lg. In xs, it should be the contents of a modal.
</div>
</div>
Sample modal (in which the secondary column should be displayed):
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Modal title</h4>
</div>
<div class="modal-body">
This is where I want the contents from the secondary column
</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>
Yes, you can do that by using jQuery's $.html() function to get the html of the column and then using $.html() again to place it in the modal. This, combined with Abdulla's recommendation, should give you what you want. Here is a demo I created:
$("#myModalBtn").click(function() {
$("#myModal .modal-body").html($("#myModalContent").html());
$("#myModal").modal("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<!-- Main Column -->
<div class="col-sm-8 col-md-9">
Main contents blah blah blah
<button type="button" class="btn btn-primary visible-xs" id="myModalBtn">Launch demo modal</button>
</div>
<!-- Secondary Column -->
<div class="col-sm-4 col-md-3 hidden-xs" id="myModalContent">
Other contents. These appear normally in sm, md, lg. In xs, it should be the contents of a modal.
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Modal title</h4>
</div>
<div class="modal-body">
This is where I want the contents from the secondary column
</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>
Click on Run Code Snippet then click on the "Full Page" link to see it in action.
Use hidden- property in Bootstrap.
Hidden-xs - Hidden in Extra Small
Hidden-sm - Hidden in Small
Hidden-md - Hidden in Extra Small
etc ..
Check this Responsive utilities
Besides using jQuery, is there a way to change the color of the .add-button below so that it toggles when click and will change back when the modal is closed?
<div className="container">
<button type="button" className="btn btn-md add-button" data-toggle="modal" data-target="#myModal">
<span className="plus-sign">+</span> Contacts Keeper
</button>
<div className="modal fade" id="myModal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel">
...
</div>
Rather than changing the button color on click you should change it on hover. Since only in that case you will be able to see visible effect otherwise when clicked modal will be closed.
One way to use psuedo classes in css and another way to use js to change the css styles.
Also I noticed that you are using classNames, It means may be using react.
In that case append a predefined css class to your existing button css classes on mouse over and remove them on mouse out.
function changeColor(x) {
x.style.background = "red";
}
function normalColor(x) {
x.style.background = "white";
}
#test-button:hover{
color:red;
background:green;
}
#test-button:active{
background:yellow;
}
#close-button:hover{
background:cyan;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" id="test-button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal1
</button>
<!-- Button trigger modal -->
<button type="button" id="test-button1" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
Launch demo modal2
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Modal title1</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" id="close-button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Modal title2</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" id="close-button1" class="btn btn-default" data-dismiss="modal" onmouseover="changeColor(this)" onmouseout="normalColor(this)">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Below i have listed my links for the head and my links at the bottom of the page. The modal is not loading and i am not sure why, i believe this is an issue with my linking of the files.
Head links:
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/carousel.css" rel="stylesheet">
Footer:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">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>
Links below footer:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.js"></script>
Here's a working jsFiddle with almost your exact HTML, the only differences are that I'm linking to CDN versions of jQuery, Bootstrap 3 CSS and Bootstrap 3 JS
As others have suggested, double check all the CSS and JS files are actually loading and there isn't a path issue
Check all your Bootstrap CSS and JS files are consistent and for Bootstrap 3
Comment out the carousel.css file, to verify there isn't a conflict there
HTML
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">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>