Adjusting the Bootstrap button block to match the width of the screen

Can anyone help me with this issue? My Bootstrap button is extending outside the screen and I'm not sure how to fix it.

Here is the link to my plunker

<div class="bigone">

    <div class="mybar">Nav bar</div>

    <div class="main">Main bar</div>

    <div class="footer">
      <button class="mx-2 my-2 btn btn-block btn-sm btn-danger">Testing</button>
    </div>

</div>

Below is the provided css

.bigone {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

Appreciate any assistance, thank you!

cssbootstrap-4

Answer №1

The reason for this issue is the margin on the button element. To solve it, simply add the display flex property to your footer class. This adjustment will contain the button element within the div with the necessary margin.

.footer {
  display: flex;
}

See the working example below.

.bigone {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
.footer {
  display: flex;
}
<link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e1fbe5fbe5f8b4b9a5bdb4fbe3">[email protected]</a>" data-semver="4.0.0-alpha.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cbbfaebfa3aeb98bfae5ffe5fb">[email protected]</a>" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>

<div class="bigone">

  <div class="mybar">
    Nav bar
    </br>something else
  </div>

  <div class="main">
    <div class="container-fluid">
      <div class="row">

        <div class="col-12">
          <h1>FIRST LINE</h1> So many words, so many words. (content continues...)
  
          <br> 
          <h1>LAST LINE</h1>
        </div>

      </div>
    </div>
  </div>

  <div class="footer">
    <button class="mx-2 my-2 btn btn-block btn-sm btn-danger">Testing</button>
  </div>

</div>

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

Utilize CSS Module class names through direct DOM access

I have a unique situation involving a component that utilizes CSS-Modules through the babel-plugin-react-css-modules plugin. During certain points in the component's lifecycle, I need to calculate new dimensions by directly accessing the DOM. Within ...

cssreactjscss-modulesreact-css-modulesbabel-plugin-react-css-modules

Guide on incorporating content from external pages into a modal using the latest version of Bootstrap, 4.4.x

I am looking to incorporate content from an external page into a Bootstrap 4.4 modal. You can view my demo here. JS: $('#theModal').on('show.bs.modal', function (e) { var button = $(e.relatedTarget); var modal ...

bootstrap-4bootstrap-modal

Tips for arranging flex children on top of one another

I am looking to position and center both boxes so that they overlap in the middle of the screen, without specifying a fixed width and height. Additionally, I want to incorporate CSS transitions to make box 1 disappear and reveal box 2 upon clicking a butt ...

htmlcssbootstrap-4flexboxcentering

Transforming an image by masking it to create a binocular-like view

I've been experimenting with creating a unique visual effect where an image is revealed through a binocular-shaped element that follows the mouse cursor. The circular part of the element moves along with the cursor, unveiling parts of the image as it ...

jquerycsssvgmasking

Prevent divs from jumping to a new line with the float property

I've been busy working on a responsive webpage and so far, everything is going smoothly. The only issue I'm facing is that when the browser window size decreases and reaches a certain point, the div elements jump to the next line. Take a look at ...

htmlcss

Expand a div without causing any displacement to surrounding elements

If you have 4 colored divs (red, yellow, green, blue), with 2 per row, and need to expand the second (yellow) without creating a gap under the red, check out this solution. The blue will be positioned underneath the expanded yellow. For a live example, vi ...

htmlcssvue.js

Display detailed images upon hovering

Top of the morning to everyone. I'm in search of a way to display higher resolution images when hovering over lower resolution ones. I want to create a rule or function that can handle this dynamically without manually adding hover effects and changi ...

javascriptjqueryhtmlcssimage

What is the reason behind the Nexus 4 (with Chrome for Android) displaying a window size of 384x519 while the screenshot depicts it as 768x1038

Currently, I am utilizing media queries to adjust the display based on different screen sizes. However, I have encountered an issue where the screen size is not being accurately reflected in CSS. For instance, on the Nexus 4 device, the display is renderin ...

javascriptcssmobileresponsive-design

Disappear element after a brief moment

What is the best way to temporarily hide an element and then have it reappear after a second? var targetElement = document.getElementById("myElement"); targetElement.onclick = function() { this.style.display = "none"; setTimeout(function(){ ...

javascripthtmlcss

What methods can be used to crop and style images in a similar manner using html and css?

Is there a way to replicate this specific method? I attempted to achieve the same look by using CSS masking, but the results weren't pleasing. Does anyone have suggestions on how to accomplish this using HTML/CSS? ...

htmlcssimagestylesheet

Step-by-step guide on incorporating edit, update, and discard functionalities within an Angular Material table component (mat-table)

I am currently working on implementing edit, update, and discard functions in an angular material table. While I have been able to successfully edit and update the table row wise, I am struggling with how to discard table rows. If you would like to see wh ...

javascripthtmlcssangularangular-material

trouble with padding on cards using vue-bootstrap

I have been working on creating a card component with Vue Bootstrap, but I've run into an issue. The card header and body seem to have excessive padding around them. If I remove the b-card element and only use b-card-header and b-card-body, it looks l ...

htmlcsstwitter-bootstrapvue.jsbootstrap-4

Clear backdrop with solid objects

I am trying to achieve a unique design where the body has an image background, and the main div has a semitransparent background. I want the image to be visible through the main div, but in a shaded manner. However, the traditional approach may cause every ...

htmlcssbackgroundopacity

Enhancing an element by incorporating animation into its active state

For my web assignment, I have received specific instructions regarding a section of the webpage involving five dice: There are five dice in play. When the webpage loads, a three-dimensional image of each dice must be displayed. Upon clicking a dice, it ...

htmlcsscss-animations

Is there a way to have line breaks done automatically within the <pre> tag?

Struggling to insert a code snippet into my React application, it's odd that no matter what I try, the format doesn't include line breaks. Below is the code snippet: import React from 'react'; import './Hello.scss'; const ...

javascripthtmlcssreactjs

Adjust the color of the text as it scrolls by

As I work on developing my website using the Neve Theme on WordPress, I have encountered an issue with customizing the header block. I am using a plugin to set a background color for the header after scrolling 100px down the page, but this makes the text h ...

javascriptcsswordpress

Difficulty replicating 3 input fields using JavaScript

Combining the values of 3 input fields into 1 Displaying 'fname mnane lname' in the fullname input field. Then copying the fullname value into another input field called fullname2. Check out the code below for both HTML and JavaScript implemen ...

javascripthtmlbootstrap-4

Preserving the video's aspect ratio by limiting the width and height to a maximum of 100%

I am trying to integrate a YouTube video using their embed code in a "pop-up". However, I am facing an issue where the video does not resize to fit within the height of its parent. I want it to be constrained by the div#pop-up that contains the video. Curr ...

javascripthtmlcssvideo

Empty space found at the bottom of the webpage

Looking for help to remove the extra white space at the bottom of my upcoming portfolio website: The issue I'm facing is that the footer appears either too long or too short on most monitors. On tiny windows, there's a scroll and on larger resol ...

htmlcss

Can the navigation bar be filled automatically with content that corresponds to the anchors found within the content?

Currently, I am utilizing a Bootstrap frontend for the project at hand. The task I am tackling involves a significant amount of automatically generated content and code, which greatly simplifies the work process. My goal is to explore the potential of cre ...

jqueryhtmlcsstwitter-bootstrap