I have small problem. I am beginner web developer. I make project in Bootstrap 4.
I have this code:
<section class="front-banners">
<div class="container">
<div class="row">
<div class="col-12 pb-4 mb-md-1">
<div class="card bg-dark text-white">
<img class="card-img front-banner-img" src="/img/banner.jpg" alt="Kuchnie">
<a href="/produkty">
<div class="card-img-overlay front-banner-overlay">
<h5 class="card-title">Title </h5>
<img src="/img/arrow-front.png">
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
<p>Poznaj ofertę</p>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
and my css:
.front-banner-overlay {
background-color: rgb(255, 173, 51);
width: 180px;
height: 180px;
margin: 20px;
border-radius: 4px;
}
.front-banner-overlay h5 {
font-family: Inter;
font-style: normal;
font-weight: 500;
font-size: 36px;
color: #1A1A1A;
}
.front-banner-overlay p {
font-family: Inter;
font-style: normal;
font-size: 13px;
line-height: 16px;
position: absolute;
bottom: 0;
color: #1A1A1A;
}
.front-banner-overlay:hover {
color: #1A1A1A;
}
I would like to add for:
<img class="card-img front-banner-img" src="/img/banner.jpg" alt="">
After hovering the cursor over the photos, I would like the photo to be black and white.
How can I do this?
This following css will work for you:
.card-img:hover{
filter: grayscale(100%);
}
Related
I am trying to put a image inside a header in a boostrap card, I do know there are other questions like this but I seriously tried everything.
Here is the code:
<div class="container">
<div style="padding: 20px 0px;" *ngFor="let blog of blogs">
<div class="card">
<div class="card-header" (click)="navigate('Blog')">
<a (click)="navigate(blog.title)">{{ blog.title }}</a>
</div>
<div class="card-body">
<p class="card-text">
{{ blog.summary }}
</p>
</div>
</div>
</div>
</div>
css:
.card-header {
background: rgba(0, 255, 0, 0.61);
color: rgb(0, 0, 0);
font-weight: bold;
cursor: pointer;
}
.card-body {
background: #43484d;
}
.card-text {
color: #6cffce;
font-weight: bold;
}
I have tried
background-image: url(imagepath)
it does not work
I also tried
<image src ...>
as top-overlay but that neither
I just want to put an image in the header which will be transparent with on the top a color (kind of like looking into a glass type of thing)
not exactly sure what you want. check this snippet if it gives you any ideas.
.card-header {
background: linear-gradient(rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.25)), url(http://www.tedgoas.com/assets/images/work/stack-overflow/cover.jpg) no-repeat center center;
height: 200px;
position: relative;
}
.card-header a {
color: white;
font-weight: bold;
font-size: 50px;
position: absolute;
top: 40%;
left: 40%;
}
.card-body {
background: #43484d;
}
.card-text {
color: #6cffce;
font-weight: bold;
}
<div class="container">
<div>
<div class="card">
<div class="card-header">
<a>Header</a>
</div>
<div class="card-body">
<p class="card-text">
Body
</p>
</div>
</div>
</div>
</div>
Here is your code as per your requirement see the code card-header same thing you can apply in anywhere it will work fine. here is link codepen link here
<div class="container">
<div style="padding: 20px 0px;" *ngFor="let blog of blogs">
<div class="card">
<div class="card-header" (click)="navigate('Blog')">
<a (click)="navigate(blog.title)">link</a>
</div>
<div class="card-body">
<p class="card-text">
Para1
</p>
</div>
</div>
</div>
</div>
Css goes here...
html, body {
height: 100%;
width: 100%;
margin: 0;
color: #f9f0f3;
background: #D21237;
}
.card-header {
background: rgba(0, 255, 0, 0.61);
color: rgb(0, 0, 0);
font-weight: bold;
cursor: pointer;
position:relative;
height:10vh;
}
.card-header::before{
content:"";
background-image: url("http://www.hdnicewallpapers.com/Walls/Big/Abstract/Red_and_Blue_Smoke_Creative_Design_Wallpaper.jpg");
height:10vh;
position: absolute;
top:0px;
width:100%;
z-index:99999;
}
.card-body {
background: #43484d;
}
.card-text {
color: #6cffce;
font-weight: bold;
}
I am making an news blog. I have created my main article cards. The cards have an image to the left of the card, and with the card having the main content like the title, brief description, author and date.
Everything works when the browser is maximized (I'm on a 13 inch laptop). As I start resizing my browser and making it smaller, everything starts to kind of break. The image does not take up the full width, and has a lot of white space to the right of it.
I tried giving the image width of 100%, but it does not seem to fix the problem. I am not sure what is wrong and why this is happening. This is only happening to these article cards. Everything else on the homepage works correctly even on smaller sized screens.
If you have some time, can you explain what is happening, and how to solve this problem? Please and thank you.
Screenshots:
Large+ Screens
As I start resizing the browser window and making it smaller it does this:
And finally the phone sized screens:
HTML
<div class="card card-article">
<div class="row no-gutters right-shadow-games">
<div class="col-auto">
<img alt="" class="img-fluid" src="//placehold.it/200x200"> <a class="article-tag games" href="#">Games</a>
</div>
<div class="col">
<div class="card-block">
<div class="row">
<div class="col-md-12">
<h4 class="card-title">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="card-author">Author on Sep 29, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.card-article {
margin-top: 2px;
margin-bottom: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.card-article .card-title{
margin-top: 15px;
margin-left: 15px;
margin-right: 10px;
font-size: 18px;
}
.card-article .card-author{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 12px;
line-height: 1.4;
}
.card-article .card-title a{
color: black;
font-weight: 600;
}
.card-article .card-description{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 14px;
line-height: 1.4;
}
For give the messy CSS I could definitely clean it up a little bit.
Here, the image will resized to 100% width at 640px media width. I think it is better when you could change the image size to something bigger (as per 100% width point) to get maximum picture clarity.
.card-article {
margin-top: 2px;
margin-bottom: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.card-article .card-title {
margin-top: 15px;
margin-left: 15px;
margin-right: 10px;
font-size: 18px;
}
.card-article .card-author {
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 12px;
line-height: 1.4;
}
.card-article .card-title a {
color: black;
font-weight: 600;
}
.card-article .card-description {
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 14px;
line-height: 1.4;
}
.article-tag.games {
position: absolute;
left: 10px;
top: 10px;
background: red;
padding: 2px 5px;
color: white;
border-radius: 4px;
}
.col-auto img {
max-width:200px;
}
#media (max-width: 640px) {
.col-auto {
width:100%;
max-width:100% !important;
}
.col-auto img {
width:100%;
max-width:100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<div class="card card-article">
<div class="row no-gutters right-shadow-games">
<div class="col-auto">
<img alt="" class="img-fluid" src="//placehold.it/640x640"> <a class="article-tag games" href="#">Games</a>
</div>
<div class="col">
<div class="card-block">
<div class="row">
<div class="col-md-12">
<h4 class="card-title">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="card-author">Author on Sep 29, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
What's happening is your image is exactly 200x200px, so it can't stretch when your page changes shape. You could find a different image (I don't recommend this - just putting it out there), or you could try adding a media query for another stylesheet on variable width devices, then resetting the height/width on those.
Use col-md-4 to image wrap div instead col-auto (see fidlle:https://jsfiddle.net/yemd0qnt/3/)
.card-article {
margin-top: 2px;
margin-bottom: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.card-article .card-title{
margin-top: 15px;
margin-left: 15px;
margin-right: 10px;
font-size: 18px;
}
.card-article .card-author{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 12px;
line-height: 1.4;
}
.card-article .card-title a{
color: black;
font-weight: 600;
}
.card-article .card-description{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 14px;
line-height: 1.4;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="card card-article">
<div class="row no-gutters right-shadow-games">
<div class="col-md-4">
<img alt="" class="img-fluid" src="//placehold.it/200x200"> <a class="article-tag games" href="#">Games</a>
</div>
<div class="col">
<div class="card-block">
<div class="row">
<div class="col-md-12">
<h4 class="card-title">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="card-author">Author on Sep 29, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
You can 100% image width with use Media Queries for mobile.
#media (max-width: 575px) {
.img-fluid{width:100%;}
}
Come to a strange problem, when I use css to set the button, I can set its color, font-size, background, but cannot set its border. The following is HTML and CSS code.
.btn-general {
border-width: 2px !important;
border-style: solid !important;
border-radius: 0;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase !important;
}
.btn-white {
border-color: #fff;
color: #fff;
}
<section id="home">
<div id="home-cover">
<div id="home-content-box">
<div id="home-content-box-inner">
<div id="home-heading">
<h3>Watch Out<br>The Modern Responsive Website!</h3>
</div>
<div id="home-btn">
<a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
</div>
</div>
</div>
</div>
</section>
Put your css in Style Tag
<style>
.btn-general{
border-width:2px !important;
border-style: solid !important;
border-radius: 0;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase !important;
}
.btn-white{
border-color: #fff;
color: #fff;
}
</style>
always put CSS on the top of html
<div id="home-cover">
<div id="home-content-box">
<div id="home-content-box-inner">
<div id="home-heading">
<h3>Watch Out<br>The Modern Responsive Website!</h3>
</div>
<div id="home-btn">
<a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
</div>
</div>
</div>
</div>
</section>
You have set your border-color to white that's why you could not see that. I have changed it to darker color so that you can see it.
.btn-general{
border-width:2px !important;
border-style: solid !important;
border-color: #ff3333;
border-radius: 0;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase !important;
}
.btn-white{
color: #222;
border-color: #222;
}
<section id="home">
<div id="home-cover">
<div id="home-content-box">
<div id="home-content-box-inner">
<div id="home-heading">
<h3>Watch Out<br>The Modern Responsive Website!</h3>
</div>
<div id="home-btn">
<a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
</div>
</div>
</div>
</div>
</section>
Hope this helps
Hello I am trying to develop an alternating two column grid layout with bootstrap, where there would be one image on the lefthand size of the screen, then reverse down the web page until the end user reaches the footer.
I would thought to achieve this using the div row col order and going by using the floats, it has worked for the first row but when it came to developing the secondary row it did not help. I do not know if it is the floats that throwing it out of whack of I literally have to much going on in my code in general. Can someone review for me please? The blank divs are the image's as well.
/* CSS Document */
/* FONT FAMILY */
body{
font-family: 'Montserrat', sans-serif;
}
p {
font-family: 'Montserrat', Gotham, Helvetica Neue, Helvetica, Arial, "sans-serif";
font-weight: 200;
letter-spacing: 0.65px;
line-height: 25px;
text-align: center;
color: white;
}
.lead {
text-transform: uppercase;
}
h2 {
margin-bottom: 1em;
font-weight: 500;
letter-spacing: 1.275px;
font-size: 30px;
color: #cf6766;
}
h3 {
margin-bottom: 1em;
font-weight: 500;
letter-spacing: 0.1em;
font-size: 21px;
color: #cf6766;
}
/**************** NAVIGATION STYLING ****************/
.navbar,.navbar-default {
background-color: #30415d;
padding: 20px;
color: white;
margin: 0 auto;
}
.navbar.navbar-default li a {
color: white;
text-align: center;
margin: 0 auto;
}
.navbar.navbar-default li a:hover{
background-color: white;
color: #031424;
font-weight: bold;
}
.navbar.navbar-default li {
font-weight: 300;
letter-spacing: 0.10em;
text-transform: uppercase;
font-size: 12px;
}
.navbar-brand img {
width: 85%;
}
.navbar-brand a {
padding: 20px;
margin-top: -40px;
}
a.navbar-brand {
margin-top: -20px;
padding-right: 20px;
padding-left: 20px;
width: 85%;
}
.navbar-default {
border: none;
}
/*img.wrap {
float:right;
}*/
/**************HOME PAGE **********/
/* blockquote {
background-color: #8eaebd;
color: white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 36px;
margin-bottom: 50px;
font-style: italic;
font-weight: 400;
} */
.quote {
font-size: 16px;
text-align: right;
font-weight: 300;
letter-spacing: 2px;
}
.jumbotron {
background:linear-gradient(#cf6766, transparent 100%),
url(../img/DSC00154.jpg) no-repeat center;
background-size: cover;
height: 768px;
margin-top: 0px;
padding-top: 0px;
display: table;
width: 100%;
}
.jumbotron h1 {
color: white;
text-align: center;
}
#jumbotron-inner {
display: table-cell;
vertical-align: middle;
}
#jumbotron-inner p {
text-align: center;
}
.senior {
background-color: #30415d;
width: 50%;
height: 500px;
color:white;
padding: 50px;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
float: left;
}
.get-involved {
background-color: #8eaebd;
color:white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
float: right;
}
.get-inolved-img {
background-image: url(../img/grandmother-child.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 500px;
float: left;
}
.newMentor{
background: url(../img/grandparents.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
max-width:1000px 100%;
height:500px;
float: right;
}
.dontations {
background-color: #30415d;
color:white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
}
.btn-lg {
background-color: #cf6766;
}
.btn-lg {
color: white;
font-weight:200;
}
.btn-lg a:hover {
color: #8eaebd;
}
/**************about PAGE **********/
#williams {
width: 40%;
height: 50%;
margin-right: 25px;
margin-bottom: 5px;
}
#goals {
background-color: pink;
padding: 20px;
}
#youth {
background-image: url(../img/youth-2.jpg);
background-repeat:no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 1000px;
}
#mentor {
background-image: url(../img/youth-1.jpg);
width: 100%;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: black;
}
#mentor h1 {
color: rgba(0, 44, 44, 1);
}
#textarea {
display: block;
}
textarea {
display: block;
}
#community {
background-image: url(../img/youth-3.jpg);
width: 100%;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: black;
}
/***************************** FOOTER *****************************/
.copy {
color: #cf6766;
}
<!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>New Mentoring - 50- Home </title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600" rel="stylesheet">
<link href="css/styles.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>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><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="https://www.newmentoring.com"><img src="img/logo.png" class="img-responsive"></a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav pull-right">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li> About</li>
<li>Saving the Youth</li>
<li> Mentoring Tips</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" onClick="location.href='community.html'">Community <span class="caret"></span></a>
<!-- DropDown Menu Here -->
<ul class="dropdown-menu" role="menu">
<li> Stories of Wisdom</li>
<li> Guest Book</li>
<li>Donate</li>
</ul><!--community dropdown menu-->
</li><!-- end of comunnity dropdown li & ul -->
<li> Contact</li>
</ul> <!-- end of navbar left -->
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav> <!-- END OF FULL NAVIGATION BAR -->
<div class="jumbotron">
<div class="container" id="jumbotron-inner">
<h1>New Mentoring.com</h1>
<p class="lead">Where our youth gain wisdom and leadership.</p>
<p><a class="btn btn-primary btn-lg" href="#newSenior" role="button">Learn more</a></p>
</div><!-- end of container & jumbtron inner -->
</div><!--jumbotron-->
<!-- BLOCKQUOTE-->
<blockquote>
<p>"Let your age make the difference in your community."</p>
<span class="pull-right quote">- Delece Williams</span>
</blockquote>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 senior">
<h2>What is a New Mentoring?</h2>
<p>The Middle Aged Generation that's considered to be between 30 to 80 whose living healthier, while inspiring youth to engage in healthier life-style choices and those helping to bridge the gap between the traditional values of seniors and the technical appetites of today's youth with wisdom keys. </p>
</div>
<div class="col-sm-6 newMentor">
</div><!-- img div-->
</div><!--row-->
<div class="row">
<div class="col-sm-6 get-involved">
<h2>How to Get Involved?</h2>
<p>We would love for you to get involved and its simple. Just be willing to share your time and /or stories, experience, wisdom and expertise to a young person to help them make better and healthier lifestyle choices for the success of a better path throughout life. You can do that by joining our online conversations or hosting a community forum near you.</p>
</div>
<div class="col-sm-6 get-inolved-img">
</div><!-- background img-->
</div><!--row-->
<!--col-md-12->
</div>
<hr>
<div class="row">
<div class="text-justify col-sm-6">
<h3>Stories of Wisdom</h3>
Share words of wisdom on how you break barriers to get young people to listen. Connect with our online family and help us to inspire others here. </div>
<div class="text-justify col-sm-6">
<h3>Guest Book</h3>
Thank you for visiting I Am The New 50 Campaign. Stop by and sign our guest book and be a part of our community. Tell us how we’ve inspired you to help youth here. </div>
</div><!-- end of row div-->
<div class="col-md-6 dontations">
<h2>Dontations for Kidz Korna</h2>
<p>Women &s; Men T-Shirts are Available for Campaign Fundraising Initiatives</p>
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<p>Price:$20.00 <br>
<br>
<a class="btn btn-lg" href="https://kidzkorna.com/" role="button">Click here to order now</a> </p>
</div>
</div>
</div>
</div>
<footer>
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<p class="copy">Copyright © 2017 · All Rights Reserved · <a href="http://newmentoring.com/" >New Mentoring</a> · Chicago, IL.</p>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
I think you're describing a layout where it's like a checkerboard style. If so you can use offsets on every second div and clear the divs.
http://www.bootply.com/IMtdYhv7bs
HTML:
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
CSS:
.col-md-6 {background-color:red; height:100px; clear:both;}
I'm having issues with my bootstrap code. When I re-size the screen the button is being pushed down outside of the row and container. It seems the container class isn't even being used. Where did I go wrong here? Thank you.
#cta-center {
line-height: 90px;
}
#cta-bg {
background: gray;
height: 90px;
}
.cta p {
text-align: center;
font-size: 35px;
font-weight: 600;
color: #fff;
}
.btn-primary {
width: 200px;
height: 50px;
background: yellow;
}
.btn-primary p {
color: #000;
line-height: 34px;
font-size: 25px;
font-weight: 600;
}
<div id="cta-center">
<div id="cta-bg">
<div class="container">
<div class="row">
<div class="cold-md-12">
<div class="col-md-8">
<div class="cta">
<p>Get a FREE Quote NOW</p>
</div>
</div>
<div class="col-md-4">
<a href="#" class="btn btn-primary">
<p>CLICK HERE</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Image: