- Utilize
ml-auto for the left inner column and mr-auto for the right inner column.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
text-align: right;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col">
<div class="row">
<div class="col-lg-8 ml-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lectus magna. Proin efficitur, mauris vitae pharetra bibendum, orci augue aliquam ante, non commodo purus nisi vel mi.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col">
<div class="row">
<div class="col-lg-8 mr-auto">
<p>Sed vulputate dapibus tristique. Vivamus gravida tortor nec neque condimentum, ut suscipit nulla lobortis. In hac habitasse platea dictumst. Sed eleifend ultrices odio in egestas.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/anon/pen/BVpWwo
- Add a dummy
col-lg-4 column before the first inner column and after the second inner column.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
text-align: right;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lectus magna. Proin efficitur, mauris vitae pharetra bibendum, orci augue aliquam ante, non commodo purus nisi vel mi.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col">
<div class="row">
<div class="col-lg-8">
<p>Sed vulputate dapibus tristique. Vivamus gravida tortor nec neque condimentum, ut suscipit nulla lobortis. In hac habitasse platea dictumst. Sed eleifend ultrices odio in egestas.</p>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/anon/pen/jKyBwy
This question may also be helpful.
Troubleshooting issues with column offsetting (Bootstrap v4.0.0-beta)
Update
If you prefer a smaller left column and larger right column layout, consider using the following code.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col-5">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lectus magna. Proin efficitur, mauris vitae pharetra bibendum, orci augue aliquam ante, non commodo purus nisi vel mi. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>;
</div>
</div>;
<div id="example-col-2" class="col-7">
<div class="row">
<div class="col-lg-9 text-right">
<p>Phasellus eu vestibulum quam. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Integer eget lacus nec ex venenatis consequat. Pellentesque interdum lectus metus.</p>
</div>
<div class="col-lg-3"></div>
</div>
</div>;
</div>;
</div>;
</body>;
</html>;
Additionally, it's preferred to use text-right over inline styling for compatibility purposes.