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:
Related
I'm trying to do this nav but when I shrink the page the buttons look terrible.
In desktop mode it works, and only when I shrink the page does it give me problems. The buttons become huge because if there is a long writing it goes to the head:
<section class="main_buttons">
<div class="container d-none d-sm-none d-md-block">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
three long words
<img src="assets/img/.." alt="">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
testtest
<img src="assets/img/.." alt="">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
testtesttest
<img src="assets/img/.." alt="">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
test test test test
<img src="assets/img/..." alt="">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
testtest test testtest
<img src="assets/img/.." alt="">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div
class="button">
<div class="nav_btn btn btn-primary sos-button">
<div class="contenitore">
test test test
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div
class="button">
<div class="nav_btn btn btn-primary sos-button">
<div class="contenitore">
testtest test
</div>
</div>
</div>
</div>
</div>
</div>
HERE'S THE STYLE
.nav_btn {
text-align: left !important;
margin: 2px 0;
width: 100%;
background-color: white !important;
border:2px solid #0062CC;
padding-left: 10px;
font-size: 16px;
&:hover {
background-color: #0062CC !important;
}
&:hover a {
color:white !important;
}
.contenitore {
width:100%;
display: flex;
justify-content: space-between;
i {
line-height:20px;
}
img {
width: 20px;
}
a {
text-decoration: none;
color:#0062CC;
font-weight: bold;
}
}
}
}
.button .sos-button {
border: 2px solid #ff4081;
&:hover {
background-color: #ff4081 !important;
}
&:hover a {
color: white;
}
a {
color: #ff4081 !important;
}
}
Using width with border can sometimes make elements larger than you expect.
You can controlled the button width, out of the .nav_btn. I tried a lot of ways and i think these are the best solution for this situation.
.button {
width: 200px; //You can try like that way
}
.nav_btn {
text-align: left ;
margin: 2px;
background-color: white ;
border:2px solid #0062CC;
padding-left: 10px;
font-size: 16px;
}
.nav_btn:hover {
background-color: #0062CC ;
}
.nav_btn a:hover {
color:white ;
}
.contenitore {
display: flex;
justify-content: space-between;
}
i {
line-height:20px;
}
img {
width: 20px;
}
a {
text-decoration: none;
color:#0062CC;
font-weight: bold;
}
.button .sos-button {
border: 2px solid #ff4081;
}
.button .sos-button:hover {
background-color: #ff4081;
}
.button .sos-button:hover a {
color: white;
}
a {
color: #ff4081;
}
or try this one.
.nav_btn {
text-align: left ;
width: 200; //or you can try like this one
margin: 2px;
background-color: white ;
border:2px solid #0062CC;
padding-left: 10px;
font-size: 16px;
}
.nav_btn:hover {
background-color: #0062CC ;
}
.nav_btn a:hover {
color:white ;
}
.contenitore {
display: flex;
justify-content: space-between;
}
i {
line-height:20px;
}
img {
width: 20px;
}
a {
text-decoration: none;
color:#0062CC;
font-weight: bold;
}
.button .sos-button {
border: 2px solid #ff4081;
}
.button .sos-button:hover {
background-color: #ff4081;
}
.button .sos-button:hover a {
color: white;
}
a {
color: #ff4081;
}
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%);
}
How do I make a css like the image below. If there is an easy way, happy to change div structure.
I tried
<div className='row paragraph paragraph-paragraph-margin'>
<div className='col xs-12 beCenter'>
<div className='pointHistoryBigPoint'>
<span className='pointHistoryBigPointNum'>5,651</span>
<span className='pointHistoryBigPointUnit'>PTS</span>
<span className='pointHistoryBigPointStar'>*</span>
</div>
</div>
</div>
css
.pointHistoryBigPoint {
font-family: "Proxima Nova";
/*
width: 200px;
height: 52px;
margin: 0 auto;
*/
height: 100px;
}
.pointHistoryBigPointNum {
font-family: "Proxima Nova Semi Bold";
/*font-size: 60px;*/
}
.pointHistoryBigPointUnit {
/*font-size:20px;*/
}
.pointHistoryBigPointStar {
}
Use sup tag
<div className='row paragraph paragraph-paragraph-margin'>
<div className='col xs-12 beCenter'>
<div className='pointHistoryBigPoint'>
<span className='pointHistoryBigPointNum'>5,651</span>
<sup className='pointHistoryBigPointUnit'>PTS*</sup>
</div>
</div>
</div>
I added display: flex to your container so now each span takes the container height, and also set line-height to be equal to the font size, which will make you text stick to the top.
.pointHistoryBigPoint {
font-family: "Proxima Nova";
width: 200px;
height: 52px;
line-height: 52px;
margin: 0 auto;
display: flex;
}
.pointHistoryBigPointNum {
font-family: "Proxima Nova Semi Bold";
font-size: 60px;
}
.pointHistoryBigPointUnit {
font-size: 20px;
line-height: 20px;
}
.pointHistoryBigPointStar {
line-height: 20px;
}
<div className='row paragraph paragraph-paragraph-margin'>
<div class='col xs-12 beCenter'>
<div class='pointHistoryBigPoint'>
<span class='pointHistoryBigPointNum'>5,651</span>
<span class='pointHistoryBigPointUnit'>PTS</span>
<span class='pointHistoryBigPointStar'>*</span>
</div>
</div>
</div>
I've looked several times though all the posts I found online as well as here, but none of the methods seem to work.
The question might be a repeat of a common subject but the problem might be specific to this code...
<section class="x-graphic">
<div class="container">
<div class="col-md-2">
<img src="images/x1.png" class="x1">
</div>
<div class="col-md-1">
<img src="images/x2.png" class="x2">
</div>
<div class="col-md-2">
<div class="row x-items">
<div class="imageOne">
<img src="images/imageOne.png" title="imageOne"> text <p id="imageOne"></p>
</div>
<div class="imageTwo">
<img src="images/imageTwo.png" title="imageTwo"> text <p id="imageTwo"></p>
</div>
<div class="imageThree">
<img src="images/imageThree.png" title="imageThree"> text <p id="imageThree"></p>
</div>
<div class="imageFour">
<img src="images/imageFour.png" title="imageFour"> text <p id="imageFour"></p>
</div>
</div>
</div>
</div>
</section>
My CSS is:
body {
padding-top: 90px;
overflow-x: hidden;
}
.x1{
margin-top: 5%;
margin-left: 10%;
width: 160px;
margin-top: 20px;
}
.x2 {
width: 50px;
margin-top: 120px;
}
.x-items img {
height: auto;
width: 30px;
}
.x-graphic p {
margin-top: 130px;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: bold;
color: #000;
display: inline;
}
section p {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 16px;
margin-bottom: 40px;
}
Problems:
1) Nothing I do centers the <img> in the x-items row to the vertical center. I can center it horizontally, but not vertically.
2) I can't center the elements inside the container horizontally, and i'm only able to do this using a col-md-offset-x...
Hi so here's what I want to do,
http://i1377.photobucket.com/albums/ah45/nikilean/line_zpswvrndxwg.jpg
a horizontal line behind the images? There are 8 circles and I want them to be connected with a line
I made it in bootstrap so the lines are divided into two col 6 and inside each col there are 3 col-3
.stepnumber {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: #f9b315;
vertical-align: middle;
color: #fff;
padding-top: 2px;
padding-right: 10px;
font-size: 18px;
font-weight: bold;
margin-top: 150px;
left: -10px;
}
.step {
height: 150px;
width: 150px;
border-radius: 50%;
background-color: #fff;
margin-top: 80px;
margin-right:-60px;
position: absolute;
}
<div class="container">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<div class="lineline"><div class=stepnumber>1</div></div>
</div>
<div class="col-md-3">
<div class="step">
<div class="workstitle">
BOOK
</div>
</div>
</div>
<div class="col-md-3">
<div class=stepnumber>2</div>
</div>
<div class="col-md-3">
<div class="step">
<div class="workstitle">
WAIT
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<div class=stepnumber>3 </div>
</div>
<div class="col-md-3">
<div class="step">
<div class="workstitle">
FOUND
</div>
</div>
</div>
<div class="col-md-3">
<div class=stepnumber>4</div>
</div>
<div class="col-md-3">
<div class="step">
<div class="workstitle">
FLY!
</div>
</div>
</div>
</div>
</div>
</div>
You can achieve the look you're going for by using the :after (or :before) pseudo class on your wrapping element. You can create a border on the :after element and position it behind your circles using z-index.
Below is an example of how you could construct it.
.timeline {
height: 150px;
line-height: 150px;
display: table;
position: relative;
}
.timeline:after {
position: absolute;
left: 0.5em;
right: 0.5em;
top: 50%;
content: "";
border-top: 3px solid #F9B315;
z-index: 900;
}
.-item {
display: table-cell;
vertical-align: middle;
z-index: 1000;
position: relative;
}
.-item > div {
margin-left: 0.5em;
margin-right: 0.5em;
width: 150px;
height: 150px;
border-radius: 50%;
text-align: center;
line-height: 150px;
font-weight: bold;
font-size: 18px;
background-color: #f9b315;
color: #FFF;
}
.-item:first-of-type > div { margin-left: 0; }
.-item:last-of-type > div { margin-right: 0; }
.-item._number > div {
width: 30px;
height: 30px;
line-height: 2;
}
<div class="timeline">
<div class="-item _number">
<div>1</div>
</div>
<div class="-item _title">
<div>BOOK</div>
</div>
<div class="-item _number">
<div>2</div>
</div>
<div class="-item _title">
<div>WAIT</div>
</div>
<div class="-item _number">
<div>3</div>
</div>
<div class="-item _title">
<div>FOUND</div>
</div>
<div class="-item _number">
<div>4</div>
</div>
<div class="-item _title">
<div>FLY!</div>
</div>
</div>
This is going to take a little bit of work on your part, but here is a way to put a horizontal line behind the div.
Here is the fiddle. The trick for the line is to make a div that's only 1px high. It will take a little bit of thinking on your part:
.line{
height: 1px;
width: 100px;
background-color: black;
z-index: 1;
position: absolute;
top: 25px;
}