CODEWITHSUNDEEP
htmltwitter-bootstrapcssbootstrap-4
Hackerman
Hackerman

Reputation: 1388

putting a vertical bootstrap button on the left edge

I'm trying to put a vertical bootstrap button on the left edge of the screen. Right now I have this CSS: 

#button1 {
  position: absolute !important;
  z-index: 10 !important;
  left: 0px !important;
  bottom: 20% !important;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button id="button1" class="btn btn-lg btn-danger">Click to toggle popover</button>

The problem is that it's not all the way at the left side; it would be if it wasn't rotated but since it is, there is a gap of space. How do I fix this?

Upvotes: 3

Views: 1627

Answers (2)

vaishali kapadia
vaishali kapadia

Reputation: 934

Add transform-origin: bottom left; to your button

#button1 {
  position: absolute !important;
  z-index: 10 !important;
  left: 0px !important;
  bottom: 20% !important;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform-origin: bottom left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button id="button1" class="btn btn-lg btn-danger">Click to toggle popover</button>

Hope this helps :)

To learn more about transform-origin property, visit https://www.w3schools.com/cssref/css3_pr_transform-origin.asp

Upvotes: 4

UkFLSUI
UkFLSUI

Reputation: 5672

You can keep your button inside a span and set width of the span manually to stick it to the left of the screen. Here's the working code:

#button1 {
  position: absolute !important;
  z-index: 10 !important;
  left: 0px !important;
  bottom: 35% !important;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  width: 45px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<span id="button1">
  <button class="btn btn-lg btn-danger">Click to toggle popover</button>
</span>

Upvotes: 1

Related Questions