Lesson: 10 | slds | Floats

Notes
Video

Notes

Use a float to pull an element out of the document’s normal flow and to align it with the left or right side of the container.

If you want the parent of the floated element to contain the floats, add the .slds-clearfix class to the parent.

Use .slds-float_left to float an element on the left.

<template>
<div class="slds-clearfix">
  <div class="slds-float_left">
    <p>I’m floooaaaating</p>
  </div>
</div>
</template>

Preview:

Use .slds-float_right to float an element on the right:

<template>
<div class="slds-clearfix">
  <div class="slds-float_right">
    <p>I’m floooaaaating</p>
  </div>
</div>
</template>

Preview:

Use slds-float_none to not float an element:

<template>
<div class="slds-float_none">
  <p>I’m not floooaaaating</p>
</div>
</template>

Preview:

Use sldx-clearfix before you float any text on the left or right:

<div class="slds-clearfix">
  <div class="slds-float_left">
    <p>I’m floooaaaating</p>
  </div>
  <div class="slds-float_right">
    <p>I’m floooaaaating</p>
  </div>
</div>

Preview:

Prev You need to login to have access to the quizzes. Next

Mastered by 22 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Login to your account

Lesson: 10 | slds | Floats

Notes

Preview:

Preview:

Lightning Web Components