When I resize my browser, I encounter issues with the functionality of bootstrap buttons

I included the following HTML in my code:

.btn {
  height: 100%;
  font-size: 10em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid  mb-5">
  <div class="row ">
    <div class="col pl-0 pr-0 ml-5">
      <button type="button" class="btn btn-primary btn-block">ONE</button>
    </div>
    <div class="col pl-0 pr-0 ml-5">
      <button type="button" class="btn btn-primary btn-block">TWO</button>
    </div>
    <div class="col pl-0 pr-0 ml-5 mr-5">
      <button type="button" class="btn btn-primary btn-block">THREE</button>
    </div>
  </div>
</div>

The issue I am facing is that when I resize the browser, the buttons stick to the right side and to each other. Can someone provide guidance on how to solve this problem? Any help would be greatly appreciated!

htmlcssbootstrap-4

Answer №1

For optimal results, please view this in your browser instead of using a snippet

I made a slight modification to your code by adding col-sm to the div classes. For more information on Bootstrap grid system, visit Bootstrap grid system.

I hope this meets your expectations.

Please expand the snippet, use Inspect Element in your browser, and switch to mobile view to see the result. Thank you.

Update

In response to your chat request, I have included some custom responsive CSS to increase font size. Simply added style="font-size:5vw;". This sets the text size relative to the viewport width (vw). The text will adjust based on the browser window size:

This is the updated view after adding style="font-size:5vw;"

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid  mb-5 ">
       <div >
    <div class="container-fluid  mb-5 ">
      <div class="row ">
      <div class="col pl-0 pr-0 ml-5 col-sm-3">
          <button type="button"  style="font-size:5vw;" class=" btn btn-primary btn-block">ONE</button>
      </div>
      <div class="col pl-0 pr-0 ml-5 col-sm-3">
          <button type="button"  style="font-size:5vw;" class=" btn btn-primary btn-block">TWO</button>
      </div>
      <div class="col pl-0 pr-0 ml-5 mr-5 col-sm-3">
          <button type="button"  style="font-size:5vw;" class=" btn btn-primary btn-block">THREE</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

Is it possible to display an unordered list upon clicking a button without relying on CSS and still achieve identical visual outcomes?

Within the responsive CSS of my web application, I am attempting to display the ul element inside the "mobile header" only upon clicking the "Connect Wallet" button. I want it to appear and disappear again as soon as anything else is clicked. Is there a w ...

javascripthtmlcssmedia-queriescss-grid

Achieving bottom alignment for an element within a flex item: steps for success

I am dealing with a flex container that contains three flex items, each of which has a link that needs to be aligned at the bottom (all links should be bottom middle-aligned). The flex-items are stretched and do not have a fixed height, similar to the fle ...

htmlcssflexbox

What is the best way to enclose an h2 with a designated class, along with the following two elements, inside a wrapper class?

Looking to select a specific block of code to wrap with a class using the jQuery .wrapAll method. I need to target the <h2> element and the two elements that follow it. Unfortunately, the elements before and after this block are inconsistent, ruling ...

jqueryhtml

hiding elements yet passing down

Despite disabling the style sheet, a dynamically created form is displaying strangely. This form will show or hide various details based on selected options. For instance, many of the elements are generated with C#.net... formOutput += "<div class=&bs ...

javascripthtmlcss.netdom

What is the best way to override @include within a CSS class?

Our team's application utilizes Bootstrap SASS for styling, but we have made certain customizations to the framework. The Bootstrap files are included in our project through a build process, making direct modifications impossible. When it comes to dr ...

csstwitter-bootstrapsass

Adjusting image size within floating containers

I am working on a design with two floating divs, one on the left and one on the right, both nested within a main div. Each floating div contains an image that needs to be resized to the maximum size possible without differing sizes. This is what I curren ...

cssautoresize

Ways to align radio buttons vertically

I am currently working with three radio buttons that are initially aligned horizontally, but I would like to change their alignment to be vertical instead. What is the best way to achieve this? * { margin: 0; padding: 0; box-sizing: border-b ...

htmlcss

Strange gray gradient background suddenly showing up on mobile devices

Encountering an issue with a login form displayed on a sliding modal. The design looks correct on desktop and even in responsive mode with dev tools, but when accessed through mobile Chrome or Safari on an iPhone, an unusual gray rounded box or shadow appe ...

cssreactjstailwind-css

Align a series of items in the center while also ensuring they are left-justified

Issue Description : I am facing a problem with centering inline-block elements. When the elements exceed the width of a single line, Action Required : I want them to be justified to the left. I have tried using flex boxes and other methods, but I can ...

htmlcsslayout

Problem encountered when utilizing Bootstrap's display classes d-none, d-md-block, and d-flex

When using the bootstrap classes d-none d-md-block in the following code block, they seem to cancel out the d-flex class. I want this block to be hidden on viewports smaller than md, but I also need to apply the d-flex class for the align-self-end class ...

htmlcsstwitter-bootstrapbootstrap-5

Page is missing images and product details being displayed

I have been diligently working on creating a product page for my wife’s jewelry site. Following a PHP tutorial, I implemented the code and attempted to run the page. Unfortunately, I encountered an issue where none of the images, including the header and ...

phphtmlcssmysqli

Adjusting the contenteditable feature to place the caret on a specific child node

I am experiencing some challenges when attempting to position the cursor after an <i> tag within a contenteditable element. Currently, this is what I have: <p contenteditable="true"><i>H</i><i>e</i><i>l</i> ...

javascriptjqueryhtml

Disable page scrolling after making changes to the DOM

When my JavaScript function executes on page load and at set intervals, it cycles through images supplied by another PHP script. However, every time the function manipulates the DOM, the page scrolls back to the top of the containing div, which is quite fr ...

javascripthtmldomscroll

Generate a new div element dynamicaly after every 10 elements are added

I am facing the following scenario: I need to dynamically add an UNKNOWN number of checkboxes to a layout component, arranged in columns with 10 checkboxes per layout item. Although I have successfully added all the checkboxes to a single div element, I ...

cssvue.jsbootstrap-4vuejs2

Issue with Firefox: Click event not fired when resize:vertical is set while focusing

Issue: Firefox is not registering the first click event when a textarea has the following CSS: textarea:focus { resize: vertical; } Check out the demo: http://jsbin.com/wuxomaneba/edit?html,css,output The fix for this problem is straightforward - ju ...

javascriptcssfirefox

Enhance the functionality of the kendo grid by incorporating additional buttons or links that appear when the

Is there a method to incorporate links or buttons when hovering over a row in a kendo grid? I've searched through the documentation and looked online, but haven't found a solution. I'm considering if I should modify my row template to displa ...

javascripthtmlkendo-ui

Is it considered acceptable to include paragraph elements within a heading tag in HTML5 (such as putting a <P> inside a <H1

Are paragraph elements allowed inside header tags in HTML5? Put simply, is this markup acceptable in HTML5? What are the implications of using it? <h1> <p class="major">Major part</p> <p class="minor"& ...

csshtmlw3c

Alpha 6 Vertical Carousel in Bootstrap 4 - Take Your Website to New

Trying to create a carousel oriented vertically in Bootstrap 4 Alpha 6 has been a bit of a challenge. It's puzzling why the Bootstrap developers didn't include this orientation, but I've been working on my own solution. I suspect there' ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4bootstrap-carousel

using response.redirect to navigate to a new page with a database value

<body> <%@page import="java.sql.*" %> <%@page import="javax.sql.*" %> <% String user=request.getParameter("username"); session.putValue("uname",user); String pass=request.getParameter("pass"); ...

htmljspservletsresponse.redirect

Creating a button within an HTML gridview to initiate printing

Here is the code snippet I am currently using: <asp:GridView ID="GridViewProducts" runat="server" AutoGenerateColumns="false" OnSelectedIndexChanged="GridViewProducts_SelectedIndexChanged" OnRowDataBound="GridViewProducts_Bound" CssClass="gridviewprodu ...

javascripthtmlasp.netinputprinting