とほほのBootstrap 4入門 - フロート

.float-{left|right|none} や .float-{breakpoint}-{left|right|none} は、CSS の float を使用してテキストの回り込みを制御します。回り込みを解除するにはクリアフィックス (.clearfix) を用います。

Sample

This is a message. aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa

Code

<div class="clearfix mb-2">
  <div class="float-left"><img src="..." alt="Image"></div>
  This is a message...
</div>
<div class="clearfix mb-2">
  <div class="float-right"><img src="..." alt="Image"></div>
  This is a message...
</div>
<div class="clearfix">
  <div class="float-none"><img src="..." alt="Image"></div>
  This is a message...
</div>