I have a custom CSS maded Modal which I want to place in the bootstrap website template. Now the problem is this custom Css Modal wasn’t fit into the theme and the css code of Modal interfere with the bootstrap classes.Here is js fiddle: https://jsfiddle.net/navjot789/bzk1jc42/1/
Layout which looking in bootstrap:
I know the CSS but I have No knowledge about classes of the bootstraps. Any help is appreciated. Thanks in Advance.
PaulOB
June 15, 2018, 2:21pm
2
Hi,
I’m not quite sure what you are asking but the bootstrap modal is clearly documented here.
(Assuming you are using bootstrap4 but of course there are similar examples for the other versions.)
You would need to put your inner html inside the modal html and then style as you think fit.
I’m not coding to code the whole thing for you but here is a working example with some of your html inside a bootstrap modal.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.modal-body{display:flex;}
.mybtn {
width: calc(50% - 20px);
float: left;
display: inline-block;
background: #e42022;
color: #FFF;
text-align: center;
padding: 5px;
box-sizing: border-box;
margin: 10px;
font-weight: bold;
}
.mybtn:hover {
opacity: 0.9;
}
.join {
background: #1b1464;
}
.right3 ul {
padding: 0px;
margin: 0px;
}
.right3 ul li {
background-image: url('https://s33.postimg.cc/502ku2hsv/correct_sign.png');
list-style: none;
padding-left:30px;
background-repeat: no-repeat;
background-position: left center;
background-size: 15px;
}
.code {
color:#23B14D;
font-weight:700;
}
.left3 {
width:40%;
padding:0 10px 0 0;
box-sizing:border-box;
min-height:2px;
}
.right3 {
width: 60%;
padding: 0px;
box-sizing: border-box;
min-height: 310px;
font-size: 17px;
}
.left3 img {
width:100%;
margin-top:0px;
}
.left3 {
background:url('https://s33.postimg.cc/d5kms1ya7/player1.png') no-repeat center top / auto 100%;
}
.right3 p {
margin:0;
}
.preventclose {
position:fixed;
top:0;
width:100%;
height:5px;
}
.left4 {
width: 100%;
float: left;
padding:0px;
box-sizing: border-box;
}
.bbtitle {
font-family: 'Poppins', sans-serif;
color: #1b1464;
display: block;
font-weight: bold;
text-transform: capitalize;
font-size: 26px;
padding: 10px 10px 10px 0;
}
.right4 {
width: 100%;
float: left;
color:#FFF;
padding:0 10px;
box-sizing: border-box;
}
.firstlink {
display: block;
padding: 13px 10px 10px;
background: none;
}
.endtext {
padding: 10px;
font-size: 13px;
color: #999;
font-weight: bold;
margin-top: 21px !important;
display: block;
float: left;
}
.dollar25 {
color:red;
font-weight: bolder;
}
.right3 p {
padding:5px;
margin-top: 18px;
font-size:14px;
text-align: justify;
}
.ifl-image {
width: 80px !important;
}
@media(max-width:767px) {
.left3 {
width:30%;
}
.right3 {
width:70%;
height: 360px;
padding:0 10px;
}
.left3 img {
width: 100%;
margin-top: 18px;
}
}
@media(max-width:550px) {
.bbtitle {
text-align: center;
font-size: 22px;
}
.left3 {
width:100%;
height:200px;
background-size:cover;
background-position:center top;
}
.right3 {
width:100%;
}
.off {
font-size:60px;
}
.left3 img {
width: 200px;
margin-top: 18px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
</div>
</div>
<!-- Modal -->
<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">International Football League</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">
<div class="left3"> <img src="http://intfl.com/themes/front//images/logo1.png" class="ifl-image"> </div>
<div class="right3">
<ul>
<li>Want to win $100K?</li>
<li>Want to win ownership of the IFL?</li>
<li>Want to help pick team names?</li>
<li>Want to help pick team logos?</li>
<li>Want to help pick players for teams </li>
<li>Want to help hire staff?</li>
<li>Want to help fire staff?</li>
</ul>
<div class="buttons123"> <a href="#" class="join mybtn">Join</a><a href="#" class="notnow mybtn">Not Now</a> </div>
<p>Well there's no need to want anymore here's your chance. Just become a member of the International Football League for just <i class="dollar25">$25</i> to help call the shots.</p>
</div>
</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>
<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>
</body>
</html>
Just copy that code and run it locally in your browser to see what it looks like and then play around with it until it suits your purpose.
Currently it should look like this:
The whole code is self contained above but of course once you put it into your bootstrap layout you will just need the html and extra css.
If you are using an older bootstrap version then you will need to refer to the older documentation but the process is much the same except you lose flexbox along the way.
Just because you are using bootstrap does not mean you do not have to learn how to code I’m afraid
4 Likes
yeh! thats what I am looking for thankyou very much sir I really appreciated your efforts that you give your important time to my code. like I said I know about css but dosn’t remember the classes of bootstrap I made my self the code as like you see above but apparently I am working on a site which was completely in bootstrap and my css code inter-fair with the bootstap classes and files so thats y I need the conversion see:https://i.stack.imgur.com/i7wXA.png
Thankyou very much for helping me sir.
system
September 14, 2018, 10:47pm
4
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
