How to make the text centered in middle of a button as image below? I have applied class below but it's not working.
<div class="row text-center">
<div class="col-lg-6 align-items-center">
Home Product
</div>
<div class="col-lg-6 justify-content-center">
Mobile Product
</div>
</div>
.btn-outline-index {
color: #c76626;
background-color: transparent;
background-image: none;
border: 4px solid #c76626;
font-weight: 400;
border-radius: 50px;
height:150px;
width:400px;
}
You just need to add display: flex;align-items: center; justify-content: center; to your buttons CSS. You can learn more about the flexbox layout from the below link.
https://www.w3schools.com/css/css3_flexbox.asp
#import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.btn-outline-index {
color: #c76626;
background-color: transparent;
background-image: none;
border: 4px solid #c76626;
font-weight: 400;
border-radius: 50px;
height:150px;
width:400px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="row text-center">
<div class="col-lg-6 align-items-center">
Home Product
</div>
<div class="col-lg-6 justify-content-center">
Mobile Product
</div>
</div>
I hope this helps.
Related
This is My Format right now on phone/dekstop
++img++ ++Title++
++SNIPPET++
I want to create it in such a way that it looks like this on phone
++img++
++Title++
++Snippet++
This is how i want to design in the card but i don't know how
This is The HTML code I am making this project on django so ignore this part {}
{% for post in object_list %}
{% if post.header_image %}
<div class="container-fluid col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10 " onclick="location.href='{%url 'article-details' post.pk %}';" style="cursor: pointer;">
<div class="row">
<div class="col-12 mt-3">
<div class="card ">
<div class="card-horizontal">
<div class="img-square-wrapper col-sm-4">
<img class="responsive" src="{{post.header_image.url}}" alt="Card image cap">
</div>
<div class="card-body">
<h4 class="card-title"> {{post.title}}</h4>
<p class="card-text">{{post.snippets}}</p>
</div>
</div>
<div class="card-footer">
<small class="text-muted">{{post.post_date}}</small>
</div>
</div>
</div>
</div>
</div>
{%endif%}
{% endfor %}
THIS the CSS part I have been trying all sorts of thing but its not happening, I dont know know what to do.
.item{
margin: auto;
padding:auto;
}
.flex-container-center {
justify-content: center;
}
.text{
padding: 5px;
text-align: center;
color: black;
}
.text2{
color: black;
}
.list-col *{
padding-top: 5px;
margin-left: 10px;
margin-right: 10px;
outline: 5px black;
}
.card-horizontal {
display: flex;
flex: 1 1 auto;
}
.card-horizontal:hover{
border: 1px solid #777;
}
img {
border: 1% solid #ccc;
display: block;
margin-left: 10%;
width: 100%;
height: auto;
}
img:hover{
border: 1% solid #777;
}
.responsive{
width: 100%;
height: 300px;
object-fit: cover;
object-position: bottom;
}
Rendered in desktop:
Rendered on Mobile:
Can anyone help me to understand what is wrong with my code?
Here It is, I removed unnecessary classes from styles.
Used col-md-4 and w-100
.item{
margin: auto;
padding:auto;
}
.flex-container-center {
justify-content: center;
}
.text{
padding: 5px;
text-align: center;
color: black;
}
.text2{
color: black;
}
a{
text-decoration: none !important;
}
.list-col *{
padding-top: 5px;
margin-left: 10px;
margin-right: 10px;
outline: 5px black;
}
.card:hover{
border: 1px solid #777;
}
img:hover{
border: 1% solid #777;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container-fluid col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10 " onclick="location.href='#';" style="cursor: pointer;">
<div class="row">
<div class="col-12 mt-3">
<div class="card ">
<div class="card-horizontal row">
<div class="img-square-wrapper col-md-4">
<img class="w-100" src="https://via.placeholder.com/150C/O" alt="Card image cap">
</div>
<div class="card-body">
<a href="#">
<h4 class="card-title"> Title</h4>
</a>
<p class="card-text">Lorem Epsum</p>
</div>
</div>
<div class="card-footer">
<small class="text-muted">11-02-2021</small>
</div>
</div>
</div>
</div>
</div>
There's a Bootstrap class for making images responsive: img-fluid.
Put this class in your img tag, and it should work without having to use other classes to make it look as you want.
Refer to: https://getbootstrap.com/docs/5.0/content/images/#responsive-images.
This link is for Bootstrap 5, but it works the same in Bootstrap 4.
I'm trying to have the text inside the "header rectangle"(darker purple) and place the heart image on the right side of the text like this
BUT I'm getting this result
with this html code
<div class="row book-header">
<div class="col-lg-4 text-right d-none d-lg-block avatar">
<img src="assets/images/avatar.svg">
<span class="name" >Hi Helana</span><br>
<span class="message">How are you today?</span>
</div>
</div>
or this one
with this html code:
<div class="row book-header">
<div class="col-lg-4 text-right d-none d-lg-block avatar">
<img src="assets/images/avatar.svg">
<div>
<span class="name" >Hi Helana</span><br>
<span class="message">How are you today?</span>
</div>
</div>
</div>
my css code is:
.book-header{
background-image: linear-gradient(269.78deg, #632095 0%, #4AC3E8 100%);
box-shadow: 0px 7.52083px 7.52083px rgba(0, 0, 0, 0.25);
height: 64px;
z-index: 300;
.avatar{
img {
width: 45px;
height: 45px;
margin-right: 20%;
margin-top: 1.5%;
}
.name {
margin-right: 32%;
color: #ffffff;
text-align: right;
padding: 0.2em 2em;
box-sizing: border-box;
font-weight: 600 !important;
font-size: 18px;
}
.message {
margin-right: 32%;
padding: 2em;
color: #ffffff;
text-align: right;
box-sizing: border-box;
font-weight: normal !important;
font-size: 15px;
}
}
Create a wrapper on both of the span and use flex on the header-wrapper container. I've simulated the image with the emoticon. You can use image also.
Flexbox
You just need to add the below classes in the header-wrapper if you are using bootstrap and remove the css.
d-lg-flex flex-row-reverse justify-content-between align-items-center
.header-wrapper{
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
<div class="row book-header">
<div class="col-lg-4 text-right d-none d-lg-block avatar header-wrapper">
<div class="image">☺</div>
<div>
<span class="name" >Hi Helana</span><br>
<span class="message">How are you today?</span>
</div>
</div>
</div>
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 6 years ago.
I am styling steps 1,2,3 for my landing page. I use the bootstrap framework in this case.
What I want is just move text for step 1 and step 3 down a little bit but leave step 2 as normal.
.steps:.step:first-child:last-child h5 {
margin-top: 25px;
}
.step {
padding-left: 130px;
padding-top: 12px;
padding-bottom: 25px;
background-color: black;
height: 110px;
border: 2px solid #62a9af;
border-radius: 60px 0px;
}
.step .number {
position: absolute;
top: 14px;
left: 25px;
font-family: "Oswald", sans-serif;
color: #ffbe01;
font-size: 4em;
line-height: 1.4em;
text-align: center;
width: 1.5em;
height: 1.5em;
background-color: rgba(98, 169, 175, 0.25);
border-radius: 50%;
}
.step h5 {
font-family: "Oswald", sans-serif;
font-size: 2em;
color: white;
font-weight: 500;
text-transform: uppercase;
}
.steps {
margin-top: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="steps">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">1</div>
<h5>REGÍSTRATE</h5>
<p></p>
</div>
</div>
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">2</div>
<h5>SIGUE LAS INSTRUCCIONES</h5>
<p></p>
</div>
</div>
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">3</div>
<h5>¡JUEGA!</h5>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
My Codepen
I don't think that's the best way to solve the problem you're facing, I think you should use flexbox, it's a lot more responsive. Here's my code.
* {
font-family: Oswald, sans-serif;
}
.step {
background-color: #000;
height: 110px;
border: 2px solid #62a9af;
border-radius: 60px 0;
display: flex;
align-items: center;
}
.step .number {
color: #ffbe01;
font-size: 4em;
line-height: 1.4em;
text-align: center;
width: 1.5em;
height: 1.5em;
background-color: rgba(98, 169, 175, .25);
border-radius: 50%;
margin: 15px;
}
.step h5 {
font-size: 2em;
color: #fff;
font-weight: 500;
text-transform: uppercase;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="steps">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">1</div>
<h5>REGÍSTRATE</h5>
<p></p>
</div>
</div>
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">2</div>
<h5>SIGUE LAS INSTRUCCIONES</h5>
<p></p>
</div>
</div>
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">3</div>
<h5>¡JUEGA!</h5>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I've simplified your CSS a little, and also changed how your number is added. You'll notice display: flex; and align-items: center; are now in .step this means everything inside .step is vertically central.
Now the text in each step will look central no matter how many lines they take up.
I hope this helps.
Just add an id for the 2 steps:
HTML:
<h5 id="heightdown">REGÍSTRATE</h5>
<h5 id="heightdown">¡JUEGA!</h5>
CSS:
#heightdown {
padding-top: 5px;
}
I know this was asked many times in SO but I can't find the answer for my question. I used bootstrap with this one and tried to have a two six columns in a row. It works as expected but what I want to achieve is that I wanted to out a gap between them. To see what I mean you can check it here.
I don't want to override the bootstrap cols here. I wanted to use only the added class which is survey-extra.
HTML
<div class="container">
<div class="row visit-redeem text-center">
<h5>Visit Site To Redeem</h5>
</div>
<div class="row">
<div class="col-xs-6 survey-extra">
<h5>FROM OUR SPONSORS</h5>
<span class="money-extra">$0.00</span>
</div>
<div class="col-xs-6 survey-extra">
<h5>FREEBIES</h5>
<span class="money-extra">$0.00</span>
</div>
</div>
</div>
CSS
.survey-extra {
background: #1e90ff;
color: #fff;
padding: 5px;
border-radius: 10px;
text-transform: uppercase;
}
.visit-redeem {
background: #56a4da;
margin-top: 5px;
margin-bottom: 6px;
color: #fff;
padding: 5px;
border-radius: 20px 20px 0 0;
text-transform: uppercase;
}
I also tried the CSS3 :nth-of-type() Selector but no luck!
I wanted to do this using css only.
Try putting survey-extra within col-xs-6 instead. Hope that help
.survey-extra {
background: #1e90ff;
color: #fff;
padding: 10px;
border-radius: 10px;
text-transform: uppercase;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="survey-extra">
<h5>FROM OUR SPONSORS</h5>
<span class="money-extra">$0.00</span>
</div>
</div>
<div class="col-xs-6">
<div class="survey-extra">
<h5>FREEBIES</h5>
<span class="money-extra">$0.00</span>
</div>
</div>
</div>
</div>
I was able to put a visual space between the two divs by using CSS to set the width of .survey-extra to a percentage and then giving either one of the divs (using the :nth-of-type() Selector) or both of them margins, like this:
.survey-extra {
width: 45%;
margin-right: 5px;
background: #1e90ff;
color: #fff;
padding: 5px;
border-radius: 10px;
text-transform: uppercase;
}
Check it out on JSFiddle.
Of course you'd have to play around with the width percentage and margins to get exactly what you want.
If you don't want to use margins, you could also keep the width set to a percentage and then use floating, like this:
.survey-extra {
background: #1e90ff;
color: #fff;
width: 45%;
padding: 5px;
border-radius: 10px;
text-transform: uppercase;
}
.survey-extra:nth-of-type(0) {
float: left;
}
.survey-extra:nth-of-type(1) {
float: right;
}
Check it out using floating on fiddle
I found a solution for my problem and I would like to share it to you for future references. What I did is add nth-of-type(2) and applied css.
CSS:
.survey-extra {
background: #1e90ff;
color: #fff;
padding: 5px;
border-radius: 10px;
text-transform: uppercase;
}
.survey-extra:nth-of-type(2) {
width: 49%;
float: right;
}
.visit-redeem {
background: #56a4da;
margin-top: 5px;
margin-bottom: 6px;
color: #fff;
padding: 5px;
border-radius: 20px 20px 0 0;
text-transform: uppercase;
}
HTML:
<div class="container">
<div class="row visit-redeem text-center">
<h5>Visit Site To Redeem</h5>
</div>
<div class="row">
<div class="col-xs-6 survey-extra">
<h5>FROM OUR SPONSORS</h5>
<span class="money-extra">$0.00</span>
</div>
<div class="col-xs-6 survey-extra">
<h5>FREEBIES</h5>
<span class="money-extra">$0.00</span>
</div>
</div>
</div>
fiddle here
.survey-extra {
display: inline-block;
float: none;
margin: 0 2% 2% 0;
width: 49%;
}
.survey-extra:last-child {
margin-right: 0;
}
And if you have more than 1 row you can replace last-child with nth-child(2n)
no need to change in css just change html like below:
<div class="container">
<div class="row visit-redeem text-center">
<h5>Visit Site To Redeem</h5>
</div>
<div class="row">
<div class="col-xs-6">
<div class="survey-extra">
<h5>FROM OUR SPONSORS</h5>
<span class="money-extra">$0.00</span>
</div>
</div>
<div class="col-xs-6">
<div class="survey-extra">
<h5>FREEBIES</h5>
<span class="money-extra">$0.00</span>
</div>
</div>
</div>
</div>
I am using Bootstrap and trying to center 3 div blocks using the bootstrap 12 columns style. So each div takes up 4 columns. I want some spacing between these columns thus I added 10px margin to the right. This pushes down the 3rd div to the next row. How do I get my spacing and still keep all 3 columns on the same row?
HTML
<div class="container">
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
</div>
CSS
.cust_box{
margin-top: 15px;
margin-bottom:15px;
padding-left: 10px;
padding-right:10px;
background-color: #1A284B;
color: #fff;
height: 290px;
max-width:100%;
border: 1px solid #162444;
margin-right: 10px; /*Line that causes issue*/
}
Problem recreated in CodePen
Place your class cust_box inside the the column. The h3 has margin so that may also be interfering with your layout. You may also want to just use the row class instead of form-group.
See working Example Snippet. (colors added so you can see what's actually happening)
.cust_box {
margin: 15px 2.5px;
padding: 25px;
height: 290px;
max-width: 100%;
background-color: #1A284B;
color: #fff;
border: 1px solid #162444;
}
.cust_box h3 {
margin: 0;
}
.red {
border: 2px solid red;
}
.yellow {
background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row yellow">
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
</div>
</div>
Example without Color
.cust_box {
margin: 15px 2.5px;
padding: 25px;
height: 290px;
max-width: 100%;
background-color: #1A284B;
color: #fff;
border: 1px solid #162444;
}
.cust_box h3 {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
</div>
</div>
with the additional margin you are destroying the bootstrap grid system.
have you tried using padding instead of margin?
apart from this you can customize bootrap a lot!
have a look on this:
http://getbootstrap.com/customize/#grid-system
EDIT:
i looked at your code and saw your struggle:
use a inner div like this:
<div class="form-group col-sm-4 col-lg-4 cust_box">
<div class="inner">
<h3>Something</h3>
</div>
</div>
and use your style on the inner div:
.cust_box .inner{
margin-top: 15px;
margin-bottom:15px;
padding-left: 10px;
padding-right:10px;
background-color: #1A284B;
color: #fff;
height: 290px;
max-width:100%;
border: 1px solid #162444;
margin-right: 10px; /*should not be an issue anymore*/
}