CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Nate
Nate

Reputation: 7856

Vertical alignment of radio and checkbox with bootstrap 4 beta 3

I'm trying to have the text of a radio/checkbox on top (and centered) of the input with the latest version of bootstrap (v4 beta 3). Like this:

What I'd like to achieve

But it seems like the radio/checkbox itself is in two parts: .custom-control-label::before and .custom-control-label::after and I can't figure out how to move the input or the text to achieve that behavior

PS Here is a plunker if you want to try

Upvotes: 1

Views: 632

Answers (1)

VilleKoo
VilleKoo

Reputation: 2854

Since you're using Bootstrap you need to override positioning of those pseudo-elements

This should be enough:

.custom-control-label::before,
.custom-control-label::after {
  top: 1.5rem;
  left: calc(50% - -.25rem)
}

plunker

EDIT

To take multiline labels into consideration, you can do following:

.custom-control-label {
  display: flex;
  flex-direction: column-reverse;
  align-items: center
}

.custom-control-label::before,
.custom-control-label::after {
  position: relative;
  order: 0;
}

.custom-control-label::after {
  order: -1;
  /* height of the ::after element */
  transform: translateY(-1rem);
}

Upvotes: 3

Related Questions