Bootstrap CSS Classes

« All Bootstrap CSS classes

Bootstrap CSS class .translate-middle

    <div class="position-relative bg-secondary" style="width: 250px; height: 100px;">
        <div class="position-absolute top-0 start-0 translate-middle bg-primary p-4"></div>
        <div class="position-absolute bottom-0 end-0 translate-middle bg-info p-4"></div>
    </div>

Preview

Are you tired of writing HTML by hand?

Check .translate-middle in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →

More Bootstrap CSS classes in Positioning category

.align-*
.clearfix
.fixed-top
.float-*-left
.float-*-right
.float-*-none
.sticky-top
.fixed-bottom
.bottom-0
.bottom-100
.bottom-50
.float-end
.float-start
.float-none
.float-lg-end
.float-lg-start
.float-lg-none
.float-md-end
.float-md-start
.float-md-none
.float-sm-end
.float-sm-start
.float-sm-none
.float-xl-end
.float-xl-start
.float-xl-none
.float-xxl-end
.float-xxl-start
.float-xxl-none
.start-0
.start-100
.start-50
.position-absolute
.position-relative
.position-static
.end-0
.end-100
.end-50
.sticky-lg-top
.sticky-md-top
.sticky-sm-top
.sticky-xl-top
.top-0
.top-100
.top-50
.translate-middle
Shuffle Editor

An online editor for busy developers.

Shuffle Editor on Twitter Shuffle Editor on YouTube Shuffle Editor on Facebook

Products

Extensions

UI Components

Support

Company

© 2025 Shuffle. All rights reserved.