placing a vertical bootstrap button along the left border

My goal is to place a vertical bootstrap button on the left side of the screen. Currently, I have implemented the following 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 issue I am facing is that the button is not aligned perfectly to the left due to its rotation. This creates a gap between the edge and the button. How can I resolve this spacing problem?

htmltwitter-bootstrapcssbootstrap-4

Answer №1

Make sure to include transform-origin: bottom left; in your button styling

#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>

Hopefully, this tip proves helpful :)

If you want to explore more about the transform-origin property, you can check out https://www.w3schools.com/cssref/css3_pr_transform-origin.asp

Answer №2

If you want to position your button on the left side of the screen, you can enclose it in a span and manually set the width of the span. Here is an example of how you can achieve this:

#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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transferring Data Between Two Modals

Currently working on developing an approval/edit process for the company website. The setup involves a jquery datatable that showcases scheduled events specific to the logged-in user in a particular format. results = await response.json(); var tr = $(this) ...

htmljquerybootstrap-4datatables

Tips for creating a "sticky" button in Angular that reveals a menu when clicked

Is there a way to incorporate a feature similar to the "Get help" button on this website: The button, located in the lower right corner, opens a sticky chat menu. I am interested in adding dynamic information to the button (such as the number of tasks a u ...

cssangular

HTML5 document type declarations

After switching my site's doctype from XHTML to HTML5, I have made the following changes: I currently have: <!DOCTYPE html> <html lang="en-GB" xml:lang="en-GB" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> Now my question is, do I sti ...

htmldoctype

Steps for selecting a checkbox via a link or button

Looking to revamp my quote builder by replacing small checkboxes with stylish 'SELECT' buttons that can automatically check the corresponding checkbox. I also want to apply a specific class to the parent div when the checkbox is checked, allowin ...

jqueryhtmlforms

When the submit button on the signup form is pressed, two distinct actions are activated to achieve specific outcomes

I am seeking assistance in implementing code that will trigger the following action: Upon clicking the 'Submit' button on a signup form after the subscriber enters their email address and name, the signup page should reload within the same tab wi ...

javascriptphpjqueryhtmlforms

Maximizing the use of default top positioning for absolutely positioned elements

After observing that an element with position:absolute can have its default top value determined based on its immediate parent's position, regardless of whether it is set to relative or not, BoltClock explained that in such cases, it remains in a stat ...

csscss-position

Issue with Bootstrap 4 toggle button functionality - looking for a fix

I'm encountering an issue with my website where the toggle button for the navbar is not functioning properly after I added it. Below is the code snippet for my navbar: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class=" ...

htmltwitter-bootstrapbootstrap-4

Styling elements with pseudo-classes when a horizontal scroll bar is activated

I have been experimenting with CSS pseudo-classes, specifically the before and after classes. While I have had no issues with the before class, I am running into a horizontal scroll problem when using the after class. I want to avoid using overflow: hidde ...

htmlcss

Adjustable height within embedded object tag

I've been struggling to adjust the height of the content on my site automatically. I have attempted using iframes as well, but nothing seems to work despite trying numerous code examples from various sources including CSS and JS scripts. Any help wou ...

javascriptcsshtml

Creating a Jira-inspired table layout in Angular by embedding components in a structured format

I'm attempting to recreate the functionality of Jira where I can create a "gadget" that can be added to a board, resized, moved, and deleted. (For those unfamiliar with why this might be useful, think of gadgets like the "Gantt" gadget. You can add a ...

htmlcssangular

What is the best way to include the border-radius CSS property to a dropdown element in Ant Design?

Adding the border-radius CSS property to my dropdown component from ant design has been a bit challenging for me. I attempted to modify the antd-css file and include a style object directly into the component, but unfortunately, I did not achieve the des ...

cssreactjsantdstyled-componentsant-design-pro

Performing a function when the ondrop event of a <li> element is triggered

Is there a way to trigger a code-behind click function on the ondrop event of an <li> element? Additionally, I would like to know if it's possible to force a postback on the onclick event. Any ideas on how to achieve this? Just to clarify, thi ...

c#htmlasp.netdrag-and-droponclick

Ensuring the model accurately reflects the input's value attribute in AngularJS

I am in the process of creating a set of image "radio buttons" where only one can be selected per group. However, as a newcomer to Angular, I'm facing difficulties in maintaining the value and using it as my ng-model. Additionally, I am looking for a ...

javascripthtmlcssangularjs

Are you curious about how jQuery can be used to group buttons together?

In my ASP.NET MVC application, I incorporate JQUERY to enhance the user experience. I am curious if there is a way to group buttons together, not radio buttons but regular buttons. Can I have buttonA + buttonB + buttonC grouped together with some space i ...

jquerycss

Switching on the click functionality

I was able to successfully toggle a boolean variable along with some other options. However, I encountered an issue when trying to create another click function for a different button to set the boolean variable to false. Here is my code: let manageme ...

javascripthtml

Which property within the <mat-option> element is used for toggling checkboxes on and off?

I'm experimenting with dynamically checking/unchecking a checkbox in mat-option. What attribute can I use for this? I've successfully done the same thing with mat-checkbox using [(ngModel)]. Here's the snippet of my code: app.component.html ...

htmlangulartypescriptcheckboxangular-material

Navigate through information within designated boundaries

In order to achieve vertical scrolling of a sidebar div and its content (3 links) between two points, I have utilized the CSS property position:fixed; top: 100px. While this setup works well initially by positioning the sidebar 100px down from the top and ...

htmlcss

Rejuvenate your Bootstrap Accordion with these Settings

Using bootstrap documentation, I have implemented an accordion in my web application with the following code: <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class=" ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

Adjust the column count in mat-grid-list upon the initial loading of the component

My goal is to implement a mat-grid-list of images with a dynamic number of columns based on the screen size. Everything works perfectly except for one small glitch – when the grid first loads, it defaults to 3 columns regardless of the screen size until ...

javascriptcssangulartypescriptangular-material

Different syntax issues in Firefox and Internet Explorer are causing errors

While this code successfully runs on Firefox, it encounters errors when used on IE. document.getElementById('zip_container').style.borderLeft = '1px solid #D9D9D9;'; In this code snippet, zip_container refers to a div element. If any ...

javascriptcss