Move the Bootstrap button to the right side of the div, extending beyond its boundaries

My bootstrap page seems to be experiencing an issue where the buttons within a div are shifted slightly to the right without any clear reason:

https://i.sstatic.net/3xlMC.png

https://i.sstatic.net/yFLFM.png

https://i.sstatic.net/gh686.png

The div in question (highlighted above) has no padding or margin:

https://i.sstatic.net/qx35G.png

and both sides of the buttons have the same margin applied:

https://i.sstatic.net/mm0cr.png

Here is the corresponding HTML code:

<div class="cinema-list" style="max-width: 700px;" class="m-auto">
    <h2>Select Cinema</h2>

    <div class="form-group">
        <label for="cinemaSearchInput">Search</label>
        <input 
            type="text" 
            class="form-control" 
            id="cinemaSearchInput" 
            placeholder="Cinema name..."
            [(ngModel)]="searchString"
            >
    </div>

    <div *ngIf="cinemaList != null">

        <button 
            *ngFor="let cinema of cinemaList" 
            type="button"
            class="btn btn-primary cinema-button m-1 w-100"
            (click)="selectCinema(cinema)"
            >
            <span>{{cinema.name}}</span>
            <i 
                *ngIf="isFavoriteCinema(cinema)"
                class="fa fa-heart pl-1 heart" 
                aria-hidden="true"></i>
        </button>

    </div>

    <div 
        *ngIf="cinemaList == null" 
        class="d-flex align-items-center pt-2">
            <span class="spinner-border text-primary mr-2"></span>
            <span>Loading...</span>
    </div>
</div>

And here is the corresponding SCSS:

.cinema-list{
    .cinema-button{
        display: block;
    }

    .cinema:hover{
        background-color: $primary;
    }
}

I can't seem to identify why the buttons are shifted in this manner. Could this be a Bootstrap bug?

This is Bootstrap version 4.3.1

Thank you

Answer №1

The reason is that the class m-1 was added to the button. Please remove that class from it.

Update

 class="btn btn-primary cinema-button m-1 w-100"

to

 class="btn btn-primary cinema-button w-100"

I trust this information will be useful to you.

Answer №2

To improve your code, consider using the my-1 and mx-0 classes instead of the m-1 class.

        <button 
            *ngFor="let cinema of cinemaList" 
            type="button"
            class="btn btn-primary cinema-button my-1 mx-0 w-100"
            (click)="selectCinema(cinema)"
            >
            <span>{{cinema.name}}</span>
            <i 
                *ngIf="isFavoriteCinema(cinema)"
                class="fa fa-heart pl-1 heart" 
                aria-hidden="true"></i>
        </button>

Answer №3

After referring to Alok Mali's solution, the issue has been resolved.

Upon inspection, it seems there is no apparent reason for the buttons to be misaligned. Could this be a bootstrap bug?

Contrary to the assumption, this issue is actually a result of CSS design.

The main reason behind this problem has been identified.

In Bootstrap, the default setting for all elements is box-sizing:border-box;

This setting is established by the reset.scss file

*,
*::before,
*::after {
  box-sizing: border-box; // 1
}

With border-box, the width and height properties of an element encompass the content, padding, and border, excluding the margin. In this case, a margin of .25em was included when the class m-1 was applied, resulting in the button overflowing.

For more information on box-sizing, click here

I hope this explanation clears things up.

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

Tips for avoiding Navbar dropdowns covering other content

Using bootstrap 4 for a project and experiencing an issue with the navbar overlapping the content. How do I make the remaining content adjust when toggling the dropdown menu? To address this problem, I have applied a 50px margin to the body element. The ...

An illustration of HTML frames

Is this method effective? <html> <body> <center> <frameset rows="50%,50%"> <frame src="images.html"> <frameset> <form action="abc.html"> <input type="submit" name="abc page" value="abc page"> </form> & ...

When making cross-origin requests, characters inside the <style> tags are transformed into Unicode HTML Entities

I am currently working on a NextJS application with react-jss integration. Within my CSS, I have a specific rule targeting '& .working[style="display: block;"] ': {...} Everything works perfectly when accessing the page from the s ...

Tips for aligning Picture boxes using CSS

As a newbie, I recently received training in HTML, CSS, and a bit of JavaScript. Currently, I am involved in a project where I display the latest news from an API. The technical aspects of fetching data from the API using JavaScript are handled by a senior ...

How to extract text from a <div> element using Selenium

Can someone help me with a Selenium question in Python? I need to extract the text "D. New Jersey" from a webpage. The location of this text may vary on different pages, but it is always under "COURT:". The HTML snippet looks like this: <div class=" ...

Using CSS backdrop-filter to create a unique blurred border effect for your web elements

In my quest for achieving unique visual effects, I have been experimenting with the backdrop-filter and element borders. While it is easy to create an element that blurs its background, I am facing challenges in making the filter affect only the border are ...

Stopping an HTML5 range input at a specific number: Tips and tricks

Does anyone have suggestions on how to use angularjs to stop a range slider at 75? I attempted it but it doesn't seem like the best approach. Any guidance would be appreciated. [EDIT for clarification after max=75 answer] Just to clarify, I want to di ...

Exemplary CSS Text Alignment When Vertical Align is Exceptional

I'm currently working on a menu where some text needs to be aligned vertically with the property vertical-align:super. However, I am facing an issue where this particular item with "super" text is not aligning properly with the other items. Below is ...

Eliminate JavaScript that blocks rendering:

Currently, I am working on optimizing my website's speed and aiming for a perfect 100/100 score on PageSpeed Insights. The website in question is www.chrispdesign.com. Despite my efforts to relocate the code and make necessary adjustments, I have bee ...

Tips for customizing the appearance of a child component using the parent component in Vue.js

I am working on creating a layout using Vuejs and flexbox that includes elements like 'header, sidebar, main-content, sidebar, footer'. I have separated each part of the layout into individual .vue files, such as header.vue and sidebar.vue. In ...

Tips for choosing a table row that is not the first or last cell

#MyTable tr+tr:hover { background: #dfdfdf; } <table id="myTable"> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>1</td> <td>2</td> &l ...

Incorporating the parent object into a nested JavaScript function

I have come across similar questions, but my situation seems unique to me. I have simplified my code and turned one line into a comment, but the core concept remains unchanged... function myFunction(options) { var button; options.widgets.forEach(f ...

Preventing button movement during navigation collapse toggle click

I am working on setting up my navbar in the following way: [collapse] navbar icon links sign in button Although I have successfully set this up, the issue is that when the navbar collapse toggle is clicked, it shifts the sign-in button u ...

Tips on how to change an image tag into a CSS selector

I need to change this tag to a WebElemet using CSS Selector instead of Xpath. I attempted with Xpath as shown below: panelSectionTitle.find( By.cssSelector( "img.aw-layout-right[style='']" ) ) <img style="" class="aw-layout-right" height="2 ...

Using a JQuery variable to display a div using the .show() method

I am attempting to use the .show() method to reveal div elements in a slideshow-like manner. My goal is to utilize the ID of a button on my navigation bar to trigger the display of a specific slide similar to how a slideshow operates. For example, if butt ...

The second tab on Bootstrap5's tab content feature seems to generate an endless amount of white

I am working on a project where I need to display statistics for both the current month and year. To organize this data, I created a card with tabs for each - one tab for the month and another for the year. By default, the month tab is loaded first. Howev ...

Can you explain the process of utilizing CSS to create a smooth transition effect with

In the example application, I am utilizing the following plugin: I am perplexed by this line of code: style="width: 538px; transition: opacity 10000ms cubic-bezier(0.42, 0.65, 0.27, 0.99) 0s;. Can someone explain how the transition works? From what ...

My custom font is not compatible with the browser on my asp.net site

I'm having trouble embedding my own font in my .aspx file. Google Chrome and Firefox don't seem to support the font, while IE does. Can someone please provide guidance on how to successfully embed the font in an asp.net page? Below is my code: ...

Is there a way to extract the content from a dynamic textbox using a dynamic button in HTML and AJAX?

My current task involves fetching data from a database and updating the records individually. I have created a table with a text input field and a button that will be generated dynamically for each record. The text input field is populated with the previou ...

Why am I not receiving any results from the communication between JavaScript and PHP using an HTTP GET request?

Currently, I have a small JavaScript program running within an HTML5 canvas and included a HTTP GET request function in my JavaScript code. The function itself is functioning properly as I tested it with multiple examples from the internet, all of which wo ...