I'm having trouble adjusting the width of my input using percentages with bootstrap, can anyone help me figure out why

Can anyone help me solve a challenge I'm facing with styling my input field without it becoming too large? Currently, when I apply the w-25 class to the input (which sets its width to 25%), the width adjusts based on its original size rather than that of the parent container. As a result, there is blank space inside the container. While I could manually set the width in pixels, I am required to use only bootstrap and avoid custom CSS. Any suggestions for a different approach?

    <div class="container my-5">
      <h1 class="fw-normal">Fibonacci Calculator</h1>
      <div id="calculatorContainer" class="d-flex align-items-center">
        <span>The Fibonacci Of</span>
        <small>
          <input
            type="number"
            class="mx-2 d-inline-block w-25"
            placeholder="#"
          />
          <button type="button" class="btn btn-primary">ls</button>
        </small>
      </div>
    </div>

If you want to see the code in action, check out this Codepen link: https://codepen.io/amirovalex-the-animator/pen/OJjgbpo

Answer №1

One option is to apply col-md-1 col-12 to the input's class attribute.

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

Incorporate Bootstrap toggle functionality using ASP.NET Core MVC Tag Helper

I'm currently developing an asp.net core mvc app and I'm fairly new to .net core. I am really intrigued by tag helpers and trying to grasp them. I understand the simple ones, but I need help replacing <input type="checkbox"> with bootstrap ...

React-Redux is throwing a TypeError due to its incapability of reading the property 'map' which is undefined

I'm still fairly new to diving into React and Redux, and I find myself a bit puzzled. My main objective is to populate HTML with a plethora of JSON data through GET requests. Utilizing react and redux to control the state of these objects, however, i ...

Ways to set the base URL on the development server for a call to react-scripts start

I am facing an issue with configuring my primary PHP server to run the ReactJS dev server created using yarn start within a directory named /reactive on the PHP site (using nginx proxy_pass). The problem is that I cannot set the root of the node server to ...

Changing the visual appearance of an alert in JavaScript and HTML

My knowledge in JavaScript is limited, but I have a script that retrieves a query from a Python service to a Mongodb database. The query is returned in the following format: [{CHAIN: "STREET ELM, ELMER", CODE: "1234"}, {CHAIN: "STREET LM, LMAO", CODE: ...

After the automation is finished, I am interested in outputting the IMDB rating of a movie or series to the terminal

I prefer using Google search to find the element because I find it easier to navigate compared to IMDB. import selenium.webdriver as webdriver print("This script is designed to retrieve the IMDb rating of a movie or TV series!!!") def get_results(search_ ...

Is there a hierarchy to be followed within the <head> element?

I have been developing websites using HTML for nearly 3 years now, but since I had to teach myself, there are still a few things I am unsure about. One question that has recently become important is whether it is possible to create groups within the <h ...

Alter the contents of Bootstrap using PHP by manipulating strings

I've implemented a modal in my html page, detailed below: <!-- Modal --> <div class="modal fade" id="uploadImages" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="moda ...

The description in the lower design must not be on the same line or at the same height as the element

I'm facing an issue with CSS regarding achieving the same height. I have a list of designs, each with a description at the bottom. While I've successfully aligned the designs vertically between portrait and landscape orientations, the problem ari ...

Modify CSS to switch body background image when a DIV is hovered

Feeling a bit lost on where to start with this issue. My divs are positioned as desired on the page. Just to clarify, I am utilizing CSS Grids for this. In short, all I'm wondering is if it's possible to change the background of the body elemen ...

Express server is not currently running to listen for the React production build

I'm encountering problems with the express listener Additionally, I've configured my proxy on package.json Error ...

What is the best way to create a sign-up box that appears on the same page when you click on the sign-up button

I am interested in implementing a 'sign up' box overlay at the center of my index page for new users who do not have an account. I would like them to be able to easily sign up by clicking on the 'sign up' button. Once they complete the ...

What is causing so many issues when this component is integrated? (the scope of issues will be detailed later on)

I have the following 3 components: news-feed.component user-activity-item.component user-activity-list.component Both user-activity components are located within a subdirectory of the news-feed component. Additionally, the user-activity-item is just a ...

Why is it that $_GET consistently returns null despite successfully transmitting data via AJAX?

I'm currently developing a PHP script that dynamically generates tables in MySQL based on user input for the number of rows and columns. The data is being sent to the server using AJAX, but even though the transmission is successful, the server is rec ...

Creating a dynamic text design using Bootstrap or CSS: What's the best approach?

I attempted to enable responsive font sizes in Bootstrap 4.3.1 by setting the $enable-responsive-font-sizes variable to true, but I did not see any changes. Below is the code from my template.html file: <div class="m-2" id="role" ...

Mobile devices are not showing the fixed header correctly

Recently, I was requested to lend a hand with a certain website: www.backincontrolbook.com Interestingly, when viewed on a PC browser, everything appears as intended. However, switching over to a mobile device (iPad and iPhone specifically), the header de ...

maintaining the alignment of three div elements

I am struggling to keep three divs side by side within a container, each containing an image and text below it. I had this layout working perfectly before, but now the right div falls underneath the other two when the screen size is reduced, followed by th ...

Why don't media queries take effect

After thoroughly reading all the @media topics on this site, it appears that the code should be functioning correctly. body { background-color: yellow; } @media screen and (min-width: 1080px;) and (max-width: 2000px;) { body { backgrou ...

Error in Axios: The requested resource lacks the 'Access-Control-Allow-Origin' header

I'm having an issue sending form data to MongoDB using Axios in the frontend. The API works when I send a post request using Postman, but it fails when coming from the frontend. Here's a screenshot of the error: Frontend Code: const res = aw ...

Error encountered: A missing semicolon was detected before a statement while executing code within a for

Although this question may have already been asked, I am struggling to understand why it is not working as expected. I simply want to increment the markers array within a for loop and then add each marker to the vector source using vectorSource.addFeature ...

Position CSS elements at the bottom of the webpage

I'm having trouble with my footer always being covered by dynamic content on my page. How can I adjust the CSS to make sure the footer stays at the bottom and adjusts to the size of the content? Here's the current CSS code for the footer: div ...