Offset Bootstrap Class Example

 

Component.html:

<div class="container-fluid">

    <div class="row">

        <h2>OffSet Tutorial</h2>

        <div class="col-md-5 offset-md-1">

            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet qui, officia sunt ducimus obcaecati cumque delectus repellendus velit maxime quibusdam. Placeat ex pariatur quos repellendus deserunt? Sed dolorem eligendi, deleniti esse voluptatibus dolores! Sapiente, saepe! Molestiae recusandae eveniet eos quidem veniam cum sit mollitia maxime. Pariatur optio dolor reiciendis fugit.

        </div>

        <div class="col-md-3 offset-md-1">

            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos reiciendis vel tempora numquam voluptatum omnis, consequatur atque sequi tenetur, blanditiis placeat temporibus velit, repellendus ea!

        </div>

        <div class="col-md-1 offset-md-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, modi?</div>

    </div>

</div>

Component.css:

.col-md-5{

    background-color: aqua;

    border: 2px solid red;

}

.col-md-3{

    background-color: aquamarine;

    border: 2px solid red;

}

.col-md-1{

    background-color: cadetblue;

    border: 2px solid red;

}

Output: