Code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row py-4">
<div class="col-12 mb-3 col-md-6 text-center leftimage">
<img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px; float:right" alt="Google">
<b><h3> Google </h3></b>
<p> Google Play Store </p>
Link
</div>
<div class="col-12 mb-3 col-md-6 text-center leftimage">
<img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px; float:left" alt="Gmail">
<b> <h3> Google Gmail </h3> </b>
<p> Gmail </p> <br>
Link
</div>
</div>
Image(1) :
With Float Left and Right(2):
Problem: when i
add float:left and float:right, the text will changed position.
(wanted the text and link below the image
What i wanted: I want both image placement is like Image(2) + Text and
Link is below the image
When you use float, you have to use clear:<right|left|both or clearfix class if you use bootstrap after those elements.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row py-4">
<div class="col-12 mb-3 col-md-6 text-center leftimage">
<img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px; float:right" alt="Google">
<div class="clearfix"></div>
<b><h3> Google </h3></b>
<p> Google Play Store </p>
Link
</div>
<div class="col-12 mb-3 col-md-6 text-center leftimage">
<img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px; float:left" alt="Gmail">
<div class="clearfix"></div>
<b> <h3> Google Gmail </h3> </b>
<p> Gmail </p> <br>
Link
</div>
</div>
But I don't recommend, you have to deal with problems later as well.
Better solution is to use flexbox, display: flex for css or class d-flex for boostrap for container. It will have flexible opportunities for manage layout.
UPDATE for css
.left-image-div-container {
display: flex;
justify-content: flex-end;
}
.right-image-div-container {
display: flex;
justify-content: flex-start;
}
.image-div-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row py-4">
<div class="col-12 mb-3 col-md-6 text-center leftimage left-image-div-container">
<div class="image-div-wrapper">
<img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px;" alt="Google">
<b><h3> Google </h3></b>
<p> Google Play Store </p>
Link
</div>
</div>
<div class="col-12 mb-3 col-md-6 text-center leftimage right-image-div-container">
<div class="image-div-wrapper">
<img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px;" alt="Gmail">
<b> <h3> Google Gmail </h3> </b>
<p> Gmail </p> <br>
Link
</div>
</div>
</div>
Solution for bootstrap
Wrap your images and link with divs with d-flex flex-column align-items-center classes. Remove float from images styles. Add to col divs d-flex class and justify-content-end for the first one, and justify-content-start for the second.
Look example in snippet.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row py-4">
<div class="col-12 mb-3 col-md-6 text-center leftimage d-flex justify-content-end">
<div class="d-flex flex-column align-items-center">
<img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px;" alt="Google">
<b><h3> Google </h3></b>
<p> Google Play Store </p>
Link
</div>
</div>
<div class="col-12 mb-3 col-md-6 text-center leftimage d-flex justify-content-start">
<div class="d-flex flex-column align-items-center">
<img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px;" alt="Gmail">
<b> <h3> Google Gmail </h3> </b>
<p> Gmail </p> <br>
Link
</div>
</div>
</div>
Hy,
First remove the float:left and float:right from both images
And then you have to just add this CSS code.
.leftimage>img{
display: block;
margin-left:auto;
margin-right:auto;
}
use this code this will solve your problem,the problem was you have placed the float option in image not the div, if not work please let me know . thank you. heres the codepen link
https://codepen.io/salmanaabir/pen/VwLLZRG
<div class="row py-4">
<div class="col-12 mb-3 col-md-6 text-center leftimage" style="float:left;">
<img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="height:640px;text-align:center;" alt="Google">
<b><h3> Google </h3></b>
<p> Google Play Store </p>
Link
</div>
<div class="col-12 mb-3 col-md-6 text-center leftimage" style="float:right;">
<img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="height:640px;text-align:center;" alt="Gmail">
<b> <h3> Google Gmail </h3> </b>
<p> Gmail </p> <br>
Link
</div>
<div class="row py-4">
<div class="col-12 mb-3 col-md-6" >
<img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" class="img-fluid d-block" style="width:512px;height:640px;" alt="Google">
<div class="caption">
<b><h3> Google </h3></b>
<p> Google Play Store </p>
Link
</div>
</div>
<div class="col-12 mb-3 col-md-6">
<img src="https://images.livemint.com/img/2019/09/12/600x338/TA_-_2019-09-12T171956.640_1568289017643.png" class="img-fluid d-block" style="width:512px;height:640px; float:left" alt="Gmail">
<div class="caption">
<b> <h3> Google Gmail </h3> </b>
<p> Gmail </p> <br>
Link
</div>
</div>
</div>
Try adding align = "bottom" to the image tag or add enough before the text string until it appears below the image.
Related
I have a bootstrap 5 website template where I want to display divs in these order:
DESKTOP:
1st line of divs: image, text
2nd line of divs: text, image
MOBILE:
1st line of divs: image, text
2nd line of divs: image, text
Simply said, there should be different order/alignment of every second line of divs for mobile devices. Could you please help me how to achieve it? I've tried to use several bootstrap classes, or even hardcode float left and right. Nothing helped. Here's my code:
<!-- Img1 -->
<div class="row" data-aos="fade-up" data-aos-delay="100">
<div class="col-md-6">
<img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt="">
</div>
<div class="col-md-6 text-center align-items-center mob_padding_T20" style="color: #FF0000;">
Copy1
</div>
</div>
<!-- Img2 -->
<div class="row" data-aos="fade-up" data-aos-delay="100" style="padding: 20px 0 0;">
<div class="col-md-6" style="float:right;">
<img src="assets/img/portfolio/img2.jpg" class="rounded mx-auto d-block" alt="">
</div>
<div class="col-md-6 text-center align-items-center mob_padding_T20" style="float:left; color: #FF0000;">
Copy2
</div>
</div>
Thank you.
SUGGESTION: Avoid using inline CSS (style:: float:left or float:right) because managing responsive devices is quite challenging.
Because it affects SEO, please remove the second row if you don't require it and use the direct col-sm/col-md/col class instead.
Use col-6 in bootstrap 5 if you want to display text and an image on a single line.
Review it here: run code snippe .
In case you have any other queries, kindly let me know.
Please review it codepen URL. I have provided you both examples in codepen.
Please let me know if you have any further question.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="text-center">
<div class="row" data-aos="fade-up" data-aos-delay="100">
<div class="col-lg-6 p-3 order-sm-1 order-md-1 bg-primary">
<img src="https://raw.githubusercontent.com/MSRAJAWAT298/msrajawat298/main/images/background-images/msrajawat298_bg-min.png" width="75px" cla ss="rounded mx-auto d-block" alt="">
</div>
<div class="col-lg-6 p-3 text-center align-items-center mob_padding_T20 order-sm-2 order-md-2 float-end bg-info" style="color:red">Copy1</div>
<div class="col-lg-6 p-3 order-sm-4 order-md-4 bg-danger">
<img src="https://raw.githubusercontent.com/MSRAJAWAT298/msrajawat298/main/images/background-images/msrajawat298_bg-min.png" width="75px" class="rounded mx-auto d-block " alt="">
</div>
<div class="col-lg-6 p-3 text-center align-items-center mob_padding_T20 order-sm-3 order-md-3 bg-dark" style="color:red">Copy2</div>
</div>
</body>
</html>
Here is the solution:
<div className="row" data-aos="fade-up" data-aos-delay="100">
<div className="col-6">
<img src="https://picsum.photos/200" className="rounded mx-auto d-block" alt="" />
</div>
<div className="col-6 text-center align-items-center mob_padding_T20" >
Copy1
</div>
</div>
<div className="row" data-aos="fade-up" data-aos-delay="100" style={{ padding: "20px 0 0" }}>
<div className="col-6 text-center align-items-center mob_padding_T20" style={{ float: "left", color: "#FF0000" }}>
Copy2
</div>
<div className="col-6" style={{ float: "right" }}>
<img src="https://picsum.photos/200" className="rounded mx-auto d-block" alt="" />
</div>
</div>
Your Problem:
The problem was that when you specified the column sized for your divs you used col-md-6 this will only be applied to medium-sized screens and larger. Here is a link explaining bootstrap grid
Please try this one
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row data-aos="fade-up" data-aos-delay="100"">
<!-- Start Img 1 -->
<div class="col-sm-6">
<img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt=""> IMG 1
</div>
<div class="col-sm-6">
Text 1
</div>
<!-- End Img 1 -->
<!-- Start Img 2 -->
<div class="col-sm-6">
<img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt=""> IMG 2
</div>
<div class="col-sm-6">
Text 2
</div>
<!-- End Img 2 -->
</div>
</div>
<div class="container mt-5">
<div class="row data-aos="fade-up" data-aos-delay="100"">
<!-- Start Img 1 -->
<div class="col-6">
<img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt=""> IMG 1
</div>
<div class="col-6">
Text 1
</div>
<!-- End Img 1 -->
<!-- Start Img 2 -->
<div class="col-6">
<img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt=""> IMG 2
</div>
<div class="col-6">
Text 2
</div>
<!-- End Img 2 -->
</div>
</div>
SUGGESTION: Please don't use inline CSS (style:: float:left or float:right) because it's very difficult to manage responsive devices.
If you don't need the second row then please remove it and use the direct col-sm/col-md/col class because it affects in SEO.
If you display text + img in single line then you can use col-6 in bootstrap 5.
Please review it codepen URL. I have provided you both examples in codepen.
Please let me know if you have any further question.
I have the following piece of code and I am use bootstrap 5:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<br><br>
<div class="list-group-item d-flex flex-row">
<div class="flex-column">
<h4>A Test Recipe</h4>
<p>This is simply a test</p>
</div>
<div class="flex-row align-self-center justify-content-end">
<img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
alt="A Test Recipe"
style="max-height: 50px !important">
</div>
</div>
I'm trying to get the image to the end of list-group-item div. I tried using justify-content-end but this has no effect. I also tried align-self-end this also doesn't bring the image to the right side.
And as for the div with the flex-column class I'm trying to vertically center its content. But it's not working either, it should be centered like the image is. I got the image vertically centered by making use of the align-self-center class. However when I apply this class to the div that has flex-column class it doesn't work.
What am I doing wrong?
؟
<linkhref="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-group-item d-flex justify-content-center align-items-center flex-wrap">
<div class="card m-3 border-0" style="max-width: 250px;">
<div class="row g-0">
<div class="col-5">
<img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
class="img-fluid rounded-5"
alt="A Test Recipe">
</div>
<div class="col-7">
<div class="card-body">
<h5 class="card-title">A Test Recipe </h5>
<p class="card-text">This is simply a test.</p>
</div>
</div>
</div>
</div>
</div>
try this.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<br><br>
<div class="list-group-item d-flex justify-content-center align-items-center flex-wrap">
<div class="card m-3 border-0" style="max-width: 350px;">
<div class="row g-0">
<div class="col-5">
<img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
class="img-fluid rounded-3"
alt="A Test Recipe">
</div>
<div class="col-7">
<div class="card-body">
<h5 class="card-title">A Test Recipe </h5>
<p class="card-text">This is simply a test.</p>
</div>
</div>
</div>
</div>
</div>
I'm trying to create a grid using the Bootstrap 4 card component. For this, I have read the documentation and used the card-deck option. I want that every row has two columns with a similar behaviour to col-12 col-md-6, with the particularity that the second column will also be splited into two rows, each one having an horizontal card. I have this piece of code:
<div class="container">
<div class="row">
<div class="card-deck">
<div class="card">
<img
class="card-img-top"
src$="{{getArticleImage2(article1)}}"
/>
<div class="card-body py-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article1)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article1)}}">
{{getSources(article1)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article1.schema:headline}}
</p>
</div>
</div>
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img
class="card-img"
src$="{{getArticleImage2(article2)}}"
/>
</div>
<div class="col-md-7">
<div class="card-body p-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article2)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article2)}}">
{{getSources(article2)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article2.schema:headline}}
</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img
class="card-img"
src$="{{getArticleImage2(article2)}}"
/>
</div>
<div class="col-md-7">
<div class="card-body p-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article3)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article3)}}">
{{getSources(article3)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article3.schema:headline}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem is that with this disposition I have three cols instead of two. The last two cards are displayed horizontally, but they are not stacked one below the other. Here is a code snippet. How could I achieve this?
if you added a div with class card-columns like that:
<div class="card-deck">
<div class="card-columns">
<div class="card">
<img
class="card-img-top"
src=""
/>
<div class="card-body py-2">
//.................
it will give you two cloumns one with a card displayed vertically and the other contains two horizontal cards.
Also read the last section of the documentation maybe it will be helpful for you to specify how many cards included in one column
https://getbootstrap.com/docs/4.3/components/card/
I am using Bootstrap 4 with a four column layout. Now I have one column with longer text which causes the "buttons" at the end to be not aligned.
The HTML is as follows:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container">
<div class="row mt-4">
<div class="col-lg-12 title-1 text-center">
My Headline
</div>
</div>
<div class="row py-5">
<div class="col-lg-3">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
This is longer text which causes the issue
</div>
<div class="button-1 text-center title-3">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3 align-self-end">
MORE INFOS
</div>
</div>
</div>
</div>
So what can I do to make the "buttons" of all columns aligned?
Make the columns flexbox (d-flex flex-column), and then use mt-auto to push the buttons to the bottom...
<div class="container">
<div class="row mt-4">
<div class="col-lg-12 title-1 text-center">
My Headline
</div>
</div>
<div class="row py-5 border">
<div class="col-lg-3 d-flex flex-column">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3 mt-auto">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5 d-flex flex-column">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
This is longer text which causes the issue
</div>
<div class="button-1 text-center title-3 mt-auto">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5 d-flex flex-column">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3 mt-auto">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5 d-flex flex-column ">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3 mt-auto">
MORE INFOS
</div>
</div>
</div>
</div>
https://codeply.com/go/B1vKo06A3i
Option 1: flexbox with column flow and use margin: auto to push the button
That's the answer #Zim posted (he's fast!)
Option 2: with text-overflow
Another option without flexbox is to style the text-overflow on the text instead. You can use text-overflow on your title-2 class to ensure the title would be just 1 line.
CSS
.title-2 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Result
http://jsfiddle.net/aq9Laaew/261632/
I have this layout and while its what i want, I want the text in the row under the image to be aligned directly under it in a block.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row mb-5">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-md-6">
<p class="text-justify g-mt-50">
To create an interior, the designer must develop an overall concept and stick to it.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="text-justify g-mt-50">
Design is not just what it looks like and feels like. Design is how it works.
</p>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-md-6">
<p class="text-justify g-mt-50">
For a house to be successful, the objects in it must communicate with one another, respond and balance one another.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="text-justify g-mt-50">
All rooms ought to look as if they were lived in, and to have so to say, a friendly welcome ready for the incomer.
</p>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
</div>
I managed to get the desired layout below. I inserted another div with the styling like below but this is not very responsive. How can i achieve my layout and make it responsive using Bootstrap 4?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row mb-5">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-md-6">
<div class="col-md-5 text-center" style="margin-left:180px">
<p class="text-justify g-mt-50">
To create an interior, the designer must develop an overall concept and stick to it.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-md-5 text-center" style="margin-left:180px">
<p class="text-justify ml-50 g-mt-50">
Design is not just what it looks like and feels like. Design is how it works.
</p>
</div>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-md-6">
<div class="col-md-5 text-center" style="margin-left:180px">
<p class="text-justify g-mt-50">
For a house to be successful, the objects in it must communicate with one another, respond and balance one another.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-md-5 text-center" style="margin-left:180px">
<p class="text-justify g-mt-50">
All rooms ought to look as if they were lived in, and to have so to say, a friendly welcome ready for the incomer.
</p>
</div>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
</div>
If I managed to understand you correctly, then the following is the layout you want. That layout is fully responsive and is achieved by using these classes for your text columns:
col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto
The col-* classes manage the column width at different screen sizes and the px-* classes manage the horizontal padding while mx-auto centers the columns horizontally.
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mb-5">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
<p class="text-justify g-mt-50">
To create an interior, the designer must develop an overall concept and stick to it.
</p>
</div>
</div>
<div class="row">
<div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
<p class="text-justify g-mt-50">
Design is not just what it looks like and feels like. Design is how it works.
</p>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
<p class="text-justify g-mt-50">
For a house to be successful, the objects in it must communicate with one another, respond and balance one another.
</p>
</div>
</div>
<div class="row">
<div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
<p class="text-justify g-mt-50">
All rooms ought to look as if they were lived in, and to have so to say, a friendly welcome ready for the incomer.
</p>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
</div>