I am applying modal from Bootstrap but it is not closing properly. When I click on close button on top-right, it crashes and when I click anywhere else on modal it closes normally. I tried many times but this problem is constant.
html,
body {
height: 100%;
}
body {
padding-top: 20px;
background: #f9e0b5 ;
background-size:100%;
background-repeat: repeat-y;
}
.pro{
background:linear-gradient(white, #e7d5b5);
margin:10px 40px 0px;
height:250px;
border-radius:30px;
box-shadow:5px 5px 5px black;
cursor:pointer;
}
#pro4{
position:relative;
left:370px;
}
.pro-caption{
font-size:17px;
font-weight:bold;
font-family:"Comic Sans MS", cursive, sans-serif;
color:#6b412b;
background:linear-gradient(white, #f5e5d7);
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- row starts-->
<div class="row">
<div class="col-md-3 pro" data-toggle="modal" data-target="#modal1">
<!--modal1-->
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog">
<!--modal1 content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title"> Fresh Milk:Bru Gold Coffee Machine</h3>
</div>
<div class="modal-body">
<img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px">
<h4><u><b>Key Features:</b></u></h4>
</div>
</div>
</div></div>
<figure><img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px"></figure>
<figcaption class="pro-caption"> Fresh Milk:Bru Gold Coffee Machine</figcaption>
</div>
</div>
As you can see, you have set the data-target property to modal1 div, so you need to have seperate div i.e <div id="modal1"></div> where you can place your content which you have commented.
<div class="col-md-3 pro" data-toggle="modal" data-target="#modal1"></div>
Basically you have placed your content in the class that toggles the popup which you need to take that out and place it in <div id="modal1"></div>, the rest is fine.
Please try below code. I hope this helps you.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- row starts-->
<style>
html,
body {
height: 100%;
}
body {
padding-top: 20px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
background: #f9e0b5 /*#f9cf86*/ ;
background-size:100%;
background-repeat: repeat-y;
}
.pro{
background:linear-gradient(white, #e7d5b5);
margin:10px 40px 0px;
height:250px;
border-radius:30px;
box-shadow:5px 5px 5px black;
cursor:pointer;
}
#pro4{
position:relative;
left:370px;
}
.pro-caption{
font-size:17px;
font-weight:bold;
font-family:"Comic Sans MS", cursive, sans-serif;
color:#6b412b;
background:linear-gradient(white, #f5e5d7);
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-3 pro" data-toggle="modal" data-target="#modal1"></div>
<div id="modal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title"> Fresh Milk:Bru Gold Coffee Machine</h3>
</div>
<div class="modal-body">
<img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px">
<h4><u><b>Key Features:</b></u></h4>
</div>
</div>
</div>
</div>
</div>
<figure><img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px"></figure>
<figcaption class="pro-caption"> Fresh Milk:Bru Gold Coffee Machine</figcaption>
<!--modal over-->`
</body>
</html>
remove aria-hidden="true" in your
×
Related
I'm using bootstrap 3 modals, the design I've been asked to do is
Notice how the graphic designer placed a button vertically aligned with the start of the text and another vertically aligned with the end of the text.
My code is
<div class="fr-popup-title">
<div class="modal-title">
<div class="row fr-title-popup-margin">
<?php echo $question_title; ?>
</div>
<div class="row">
<?php echo $you_know; ?>
</div>
<div class="row">
<?php echo $migrant; ?>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-4 pl col-md-push-2">
<button type="button" class="btn btn-warning modal-fr-btn yes-fr-popup" data-dismiss="modal">
<?php echo $yes; ?>
</button>
</div>
<div class="col-xs-4 btn-col pr col-md-push-3">
<button type="button" class="btn btn-warning modal-fr-btn close-fr-popup" data-dismiss="modal">
<?php echo $no; ?>
</button>
</div>
</div>
I get what I want but not the alignment I want, if I add some margins, it will break on another screen, what's the best way to solve it?
Please note that I tried inserting all my code as a snippet and it made more mess than the real deal, don't use the snippet as a reference, my code in a browser is way better, and don't worry about my classes, they seem like a lot but all of them are useless, they are nothing but a failed attempt at aligning.
The one without snippet is the same but easier to read.
$(window).on('load', function () {
$('#francepopup').modal('show');
});
.fr-title-popup-margin {
margin-top: 20px;
}
.fr-popup-title {
font-size: 24px;
font-family: 'Montserrat', sans-serif;
color: #008cc0;
font-weight: 800;
text-align: center;
}
.modal-fr-btn {
border-radius: 40px;
height: 25px;
width: 80px;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
color: white;
font-weight: 800;
}
.dont {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 6px;
}
.fr-flags {
margin: 0 auto;
}
.fr-text {
margin: 0 auto 0 3px
}
#media (min-width: 992px) {
.modal-dialog {
width: 30%;
}
}
#media (max-width: 991px) {
.pr {
float: right;
}
.pl {
float: left;
}
}
<script src="https://cdnjs.cloudflare.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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<body>
<div class="modal fade" id="francepopup" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<button type="button" class="close close-fr-popup" data-dismiss="modal">×</button>
<div class="fr-popup-title">
<div class="modal-title">
<div class="row fr-title-popup-margin">
Are you or is someone
</div>
<div class="row">
you know
</div>
<div class="row">
a migrant in France?
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-4 pl col-md-push-2">
<button type="button" class="btn btn-warning modal-fr-btn yes-fr-popup" data-dismiss="modal">
Yes
</button>
</div>
<div class="col-xs-4 btn-col pr col-md-push-3">
<button type="button" class="btn btn-warning modal-fr-btn close-fr-popup" data-dismiss="modal">
No
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
i simply edited your code and i hope it is what you really needed :)
$(window).on('load', function () {
$('#francepopup').modal('show');
});
.fr-title-popup-margin {
margin-top: 20px;
}
.fr-popup-title {
font-size: 23px;
font-family: 'Montserrat', sans-serif;
color: #008cc0;
font-weight: 800;
/*text-align: center;*/
}
.modal-fr-btn {
border-radius: 40px !important;
/*height: 25px;*/
width: 80px;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
color: white;
font-weight: 800;
}
.dont {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 6px;
}
.fr-flags {
margin: 0 auto;
}
.fr-text {
margin: 0 auto 0 3px
}
#media (min-width: 992px) {
.modal-dialog {
width: 30%;
}
}
#media (max-width: 991px) {
.pr {
float: right;
}
.pl {
float: left;
}
}
<script src="https://cdnjs.cloudflare.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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<body>
<div class="modal fade" id="francepopup" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<button type="button" class="close close-fr-popup" data-dismiss="modal">×</button>
<div class="fr-popup-title">
<div class="modal-title">
<div style="display:flex">
<div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div>
<div style="max-width:49.33333333%; text-align:center">
Are you or is someone <br/>
you know <br/>
a migrant in france?
</div>
<div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div>
</div>
</div>
</div>
<div class="modal-body">
<div style="display:flex">
<div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div>
<div style="max-width:49.33333333%; flex: 0 0 49.33333333%">
<button type="button" style="float:left; width:115px; height:40px; font-size:18px" class="btn btn-warning modal-fr-btn yes-fr-popup" data-dismiss="modal">
Yes
</button>
<button type="button" style="float:right;width:115px; height:40px; font-size:18px" class="btn btn-warning modal-fr-btn close-fr-popup" data-dismiss="modal">
No
</button>
</div>
<div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div>
</div>
<br/>
<div style="display:flex">
<div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div>
<div style="max-width:49.33333333%; flex: 0 0 49.33333333%; text-align:right; margin-top:-15px">
(Please dont ask <br/> me this again)
</div>
<div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
Let me proceed by saying that I have searched Google and Stack Overflow to find the answer to this. I have tried many solutions, but none are working.
The main issue right now is the fact that my CSS won't override the Bootstrap CSS in the jumbotron. It won't change the background color, background image or nav bar settings.
I have tried using !important. I have tried calling my stylesheet after calling the bootstrap one. In my current version, I have the #import code to call the Bootstrap CSS at the beginning of my own CSS file. None have worked. For a few items, I changed the bootstrap file, but only for color.
Please help me figure out why my file will not override bootstrap. You can see the site at http://www.dismantledesign.com/testsite2/
The site is incomplete. I just can't proceed with styling until I figure this out.
Sorry if any code ends up missing. SO doesn't always like my pastes from TextWrangler. Feel free to look at it via the source code in the link.
Code below:
#import url("bootstrap.min.css");
body{
font-family: 'Raleway', Helvetica, Arial;
font-size: 16px;
color: #666666;
font-weight: 400;
letter-spacing: 1px;
}
p{
line-height: 20pt;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6{
color: #333333;
text-transform: uppercase;
font-family: 'Raleway', Helvetica, Arial;
font-weight: 700;
}
a{
color: #00acec;
text-decoration: none;
font-family: 'Raleway', Helvetica, Arial;
font-weight: 600;
}
a:hover, a:focus{
color: #5a5e61;
text-decoration: none;
}
.btn-default{
border-radius: 2px;
border: 1px solid #a7adb0;
font-size: 14px;
color: #a7adb0;
font-weight: 700;
text-transform: uppercase;
padding: 11px 20px;
}
.btn-default:hover{
background: #5a5e61;
color: #a7adb0;
}
/*end*/
/*logo*/
.navbar-brand{
width: 174px;
height: 50px;
padding: 0;
margin: 0;
text-indent: -9999px;
}
/*end*/
/*navigation*/
.navbar-default{
background: none;
border: none;
padding: 0 0 60px 0;
}
.navbar-default .navbar-nav>li>a{
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
color: #a7adb0;
padding: 11px 0;
text-align: center;
}
.navbar-default .navbar-nav>li>a:hover[
color: #fff;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
background: none;
outline: 0;
color: #fff;
}
.navbar-toggle{
border: none;
margin-top: 0;
margin-right: 0;
width:32px;
height: 32px;
text-align: center;
}
.navbar-default .navbar-collapse{
border: none;
background: rgba(0,0,0,0.1) !important;
border-radius: 2px;
box-shadow: none;
}
.jumbotron{
background: #363737 url("img/tempjumbotron.jpg") no-repeat;
background-size: cover;
max-height: 800px;
padding: 60px 0;
margin: 0;
}
/*end*/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Hey, this is the CC title!-->
<title>Contra Coda Media | Audio | Photo | Video</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--This is where the CSS comes from. -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only"> Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo5.png"></a>
</div>
<!-- Collect Nav Content -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div><!--END NAVBAR COLLAPSE-->
</nav>
<div class="row text-center">
<h1>THIS IS CONTRA CODA</h1>
<h3>where the music never ends</h3>
LEARN MORE
</div>
</div>
</div>
<!--END JUMBOTRON-->
<div class="whatsnew">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="img/levelup.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive" src="img/heartwhole.jpg" alt="">
</div>
</div>
</div>
</div>
<!--END WHATS NEW-->
<div class="services">
<div class="container">
<div class="row">
<div class="services-audio text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-headphones"> </span>
<h4>AUDIO</h4>
<p>We believe in good, thoroughly crafted recording and mixing with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
<div class="services-photo text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-camera"> </span>
<h4>PHOTO</h4>
<p>We believe in good, thoroughly crafted recording with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
<div class="services-video text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-facetime-video"> </span>
<h4>VIDEO</h4>
<p>We believe in good, thoroughly crafted recording with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
</div>
</div>
</div>
<!--END SERVICES-->
<div class="clients">
<div class="heading">
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<h1>Clients</h1>
</div>
<div class="col-md-6 text-center">
see more
</div>
</div>
</div>
</div>
<!--END HEADING-->
<div class="gallery">
<!--GALLERY START-->
<div class="galleryinner">
<img src="img/clients/ivey.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>IVEY</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/rufus.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>RUFUS DAWKINS</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/seddymac.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>SEDDY MAC</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/lomax.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>MELISSA LOMAX</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/jeremy.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>JEREMY WILLIAMS</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/echoing.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>WHEN ALL KEPT ECHOING</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/delisle.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>RAISTLIN DELISLE</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
</div>
<!--END GALLERY-->
</div>
<!---END CLIENTS-->
<div class="firstcontact">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="email text-center">
<span style="font-size: 30px" class="glyphicon glyphicon-envelope"> </span>
<h5>EMAIL</h5>
<p>layne#contracoda.com</p>
</div>
</div>
<div class="col-md-8">
<div class="social text-center">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-twitter"> </span>
<span class="icon-sprite sprite-soundcloud"> </span>
</div>
</div>
</div>
</div>
</div>
<!---END FIRST CONTACT-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<div class="copyright">
<small>© 2017 CONTRA CODA MEDIA</small>
</div>
</div>
<div class="col-md-6 text-center">
<div class="design">
<small>WEB DESIGN BY DISMANTLE DESIGN</small>
</div>
</div>
</div>
</div>
</footer>
<!---END CLIENTS-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
On line 82 you are using a square bracket [ instead of an squiggle {, swap this and it will work:
.navbar-default .navbar-nav>li>a:hover {
This basically makes everything after the error not work, thus why your background wont change :) Also your background image will not change unless it looks the line looks like this (line 110):
background: #363737 url(../img/tempjumbotron.jpg) no-repeat;
Koda
I am having a modal, showing div in 'modal-body'.
<div class="modal-body">
<div class="scoll-tree">
<div class="history">
Report Event Details
</div>
<div class="history">
Report Event Details 1
</div>
<div class="history">
Report Event Details 2
</div>
<div class="history">
Report Event Details 3
</div>
</div>
</div>
Set the class as bellow :
.scoll-tree{
width: 400px;
height:80px;
overflow-x: scroll;
}
.history {
background: rgba(255, 255, 255, 0.7);
float: left;
min-width: 5em;
width: 25ex;
max-height: 3em;
margin: 2em;
padding: 1em;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 16px;
box-shadow: 2px 5px 5px rgba(0,0,0,0.2);
vertical-align: central;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I want horizontal scroll bar to 'scoll-tree' container, when 'history' div exceed the width.
Currently it give vertical scroll bar, i want only horizontal scroll bar.
https://jsfiddle.net/hemantmalpote/4duq2svh/35/
<html lang="en">
<head>
<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/3.2.1/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>Modal Example</h2>
<!-- 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 class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div style="height:100px; width:100px; overflow-x:auto">
Content1
Content2
Content3
Content4
Content5
Content6
Content7
Content8
Content9
Content10
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Well not sure whether it is what you are looking for, but check it https://jsfiddle.net/4duq2svh/44/. I changed you css little bit,
.modal-body {
width: 400px;
overflow-x: scroll;
}
.scoll-tree{
width: 800px;//ideally you it is better to make js script which will calculate this value
height:80px;
}
Very Simple -
Just use max-width instead of width & set overflow-x: auto.
So it will be -
.scoll-tree{
max-width: 400px;
height:80px;
overflow-x: auto;
}
You may first set it to 200px for testing whether scroll appears or not.
The title might be misleading, but I didn't know how else to name it.
In any case, I need to have an div/image inlined with a text, and a button beneath that text. The issue is, I can't really make the button take the full width without adding any padding, no matter what I try.
To make my explanation clearer, here's an image of what I'm trying to make:
And I'm trying to use Bootstrap 4 utilities only.
This is my code so far:
.col-md-3 {
background-color: #ededed;
}
.img {
width: 188px;
height: 88px;
background-color: #292a2c;
}
.btn {
background-color: #292a2c;
color: #ededed;
}
<div class="col-md-3 d-flex p-0">
<div class="img"></div>
<div>
<h6 class="m-auto">Text goes here</h6>
<button class="btn rounded-0 btn-block">Button</button>
</div>
</div>
How can I make this work? Also, the div with a class .img is a placeholder in a way, and needs to stay like that.
Thank you!
You can achieve this by using bootstrap media object with no additional css. Please see code snippet below
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="media">
<img src="https://via.placeholder.com/188x88" class="mr-3" alt="">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<button class="btn btn-primary btn-block">Button</button>
</div>
</div>
</div>
</div>
</div>
You can try something like this, then style it accordingly:
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ79Qe630Fli9-SIDz188GQURmrRfhh6AksMKexPP5JvsE7AJ6t01mf5A">
</div>
<div class="col-8">
<div class="row">
<p>text</p>
</div>
<div class="row">
<button>button</button>
</div>
</div>
</div>
</div>
Here is the code for getting as shown in the image
'<div class="col-md-12"><div class="row"><div class="col-md-3"><div class="row"><div class="img"></div></div></div>
<div class="col-md-6"><div class="row">
<h6 class="m-auto">Text goes here</h6><button class="btn rounded-0 btn-block">Button</button></div></div></div>
For style use the style in your question
You could do something like this.
Note that Bootstrap by default does not have a black background class so you would have to create one.
.bg-black {
background-color: #000 !important;
border: 2px solid #000 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid"> <!-- Make it full width -->
<div class="row d-flex"> <!-- display flex -->
<div class="col-4 align-self-stretch"> <!-- stretch the column -->
<img class="w-100" src="http://placehold.it/200x200" />
</div>
<div class="col-8 align-self-stretch"> <!-- stretch the column -->
<p>Some Text Here.<br/> Can be long or short</p>
<p>Yet another paragraph</p>
<p>And one more paragraph</p>
<button class="btn btn-primary bg-black btn-block rounded-0">Btn Txt</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
.col-md-3 {
background-color: #ededed;
width:100% !important;
}
.col-md-3> div{
display:inline-block;
float:left;
width: 60%;
height:100%;
}
.img {
width: 15% !important;;
height: 88px !important;
background-color: #292a2c;
display:inline-block;
}
.btn {
width: 60%;
background-color: #292a2c;
color: #ededed;
height:50%;
display:inline-block;
}
<div class="col-md-3 d-flex p-0">
<div class="img"></div>
<div>
<h6 class="m-auto">Text goes here</h6>
<button class="btn rounded-0 btn-block">Button</button>
</div>
</div>
Everything looks good just make sure that you have bootstrap.css file in right place and make sure that its working.
I made some changes to your code, its a bit hard coded but u must take care to overwrite bootstrap classes and don't change them directly.
.box {
background-color: #ededed;
}
.img {
width: 188px;
height: 88px;
background-color: #292a2c;
float: left;
margin-right: 5px;
}
.text {
float: left;
}
.btn {
background-color: #292a2c;
color: #ededed;
margin-top: 33px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6 d-flex p-0">
<div class="box">
<div class="img"></div>
<div class="text">
<h6 class="m-auto">Text goes here</h6>
<button class="btn rounded-0 btn-block">Button</button>
</div>
</div>
</div>
I have a bootstrap modal window on my site that I can't seem to get styled consistently.
This is what my first modal looks like (and how I want it styled):
This is the 2nd modal window and styling:
here is the css that styles the title and the close:
.modal-title {
margin: 10px !important;
}
.close {
opacity: 1 !important;
position: relative !important;
padding-right: 15px !important;
top: 7px !important;
left: 3px !important;
}
Here is a copy of the relevant html for the modal windows:
<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<h4 class="modal-title">They Live (1988)</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div id="contactUs" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div classs="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<br>
<h4 class="modal-title">Send Me a Note</h4>
</div>
<div class="modal-body">
<form id="contact-send" method="post" action="">
...
</form>
</div>
</div>
</div>
</div>
The html to call the modals:
Movie
and
<button type="button" class="cta btn btn-lg btn-success" data-keyboard="true" data-toggle="modal" data-target="#contactUs">Contact Us</button>
edit 1: There are no parent divs. I did as suggested and removed the !important elements. I do have a form on the 2nd modal window and an iframe in the first, maybe this has to do with margins being set by those rules...looking into that now. Anyway this is what it looks like right now for the form:
and:
Edit2:
Messing around with my code a bit more, I see that if I remove the modal-header class and put the elements into modal-content that it seems to work. I'll post a final edit if I figure out anything else.
It is a simple syntax error that you may have overlooked.
The .modal-header inside #contactUS is not working because the class attribute is written as classs. Simply remove the extra letter.
You have a <br> tag before the h4 which I assume you added as an attempt to solve the problem. It is not needed so you can remove it.
The correct code would be like this:
.modal-title {
margin: 10px !important;
}
.close {
opacity: 1 !important;
position: relative !important;
padding-right: 15px !important;
top: 7px !important;
left: 3px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
Movie
<button type="button" class="cta btn btn-lg btn-success" data-keyboard="true" data-toggle="modal" data-target="#contactUs">Contact Us</button>
<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<h4 class="modal-title">They Live (1988)</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div id="contactUs" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<!-- was classs -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<!-- <br> -->
<h4 class="modal-title">Send Me a Note</h4>
</div>
<div class="modal-body">
<form id="contact-send" method="post" action="">
...
</form>
</div>
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/j1sb9gz3/