.main-img{
background-image: url('https://i.imgur.com/oJRtoXq.jpeg');
height: 400px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.con-righ{
color:white;
display: inline-block;
max-width: 50%;
}
.new-h4 {
color: white;
font-size:25px;
}
.con-righ p{
font-size:17px;
}
.but-red{
padding: 15px;
border-radius: 5px;
background-color: #ff0000;
color: white !Important;
width: max-content;
font-size: 18px;
text-decoration: unset;
transition: .3s all;
overflow: hidden;
display: block;
}
<div class="main-img">
<div class="con-righ">
<h4 class="new-h4">Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="but-red" href=""> Know More</a>
</div>
</div>
Hope this would help you.
Please find the same using bootstrap 3. you can remove the extra div (col-6) you have added to make an empty space. Because, here also I am using flexbox to align the content div vertically and horizontally. You can follow this method without breaking any of your existing layouts.
.main-img{
background-image: url('https://i.imgur.com/oJRtoXq.jpeg');
height: 400px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.con-righ{
color:white;
display: inline-block;
max-width: 50%;
}
.new-h4 {
color: white;
font-size:25px;
}
.con-righ p{
font-size:17px;
}
.but-red{
padding: 15px;
border-radius: 5px;
background-color: #ff0000;
color: white !Important;
width: max-content;
font-size: 18px;
text-decoration: unset;
transition: .3s all;
overflow: hidden;
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="row main-img">
<div class="col-sm-6 con-righ">
<h4 class="new-h4">Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="but-red" href=""> Know More</a>
</div>
</div>
Fix height to background may cause problems many times, You can set padding instead of fixed height to resolve that.
Please have a look at this example with responsive layout.
.bg-main{
background-image: url('https://i.imgur.com/oJRtoXq.jpeg');
background-size:cover;
background-position: left;
background-repeat: no-repeat;
padding:80px 0;
}
@media (min-width: 992px) {
.bg-main{
padding:140px 0;
}
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section class="bg-main">
<div class="container">
<div class="row justify-content-end">
<div class="col-md-6">
<h2 class="text-white">Lorem ipsum</h2>
<p class="text-light mb-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus eos veniam officia nulla fugit tenetur nobis nesciunt laboriosam, repellat quod impedit quos nam culpa quam, quisquam, reiciendis consequuntur odit fugiat?</p>
<a href="" class="btn btn-danger">Know more</a>
</div>
</div>
</div>
</section>
i want to make a portion like the below image . I am using bootstrap in my website.
I write the following code . But i don’t understand how to place the div in vertical middle portion also i am not sure manually placing width and height of parent div is correct or not . Please see my code below
.main-img{
background-image: url('https://i.imgur.com/oJRtoXq.jpeg');
width: 100%;
height: 700px;
}
.con-righ{
color:white;
}
.new-h4 {
color: white;
font-size:25px;
}
.con-righ p{
font-size:17px;
}
.but-red{
padding: 15px;
border-radius: 5px;
background-color: #ff0000;
color: white !Important;
width: max-content;
font-size: 18px;
text-decoration: unset;
transition: .3s all;
overflow: hidden;
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="row main-img">
<div class="col-sm-6"></div>
<div class="col-sm-6 con-righ">
<h4 class="new-h4">Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="but-red" href=""> Know More</a>
</div>
</div>
Please help to get the same result.
To achieve this, you won’t require bootstrap. Use
but in my website i am using bootstrap.
Ok, using bootstrap also it is possible.
Since you are using bootstrap 3, you need to additionally use flexbox to make it happen easily. I have posted answer without using bootstrap. I will edit it and append same functionality using bootstrap 3 also
This is really helpful. Thank you
