Expanding the size of your Bootstrap 3 input box

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

Incorporating Bootstrap 3 into a Flask application, I have created a basic layout so far:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="content">
        <div class="pull-middle">
          <h1 class="page-header">Create an amazing App template with Bootstrap.</h1>
          <div class="container">
            {% block content %}
            {% endblock %}
          </div>
          <div class="row">
            <div class="col-xs-12 col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-4">
              <div class="panel panel-default ">
                <div class="panel-body ">
                  <form action="#" role="form">
                    <div class="input-group ">
                      <input type="email" class="form-control wide-input" placeholder="Email Address" required>
                      <span class="input-group-btn">
                        <button class="btn btn-success btn-circle" type="submit">Sign up for free</button>
                      </span>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <footer class="footer text-center">
        <div class="container">
          <small>© Copyright 2015. </small>
        </div>
      </footer>

I am looking to expand the width of the email address form while keeping the green button the same size. How can this be achieved?

Answer №1

Your usage of Bootstrap Grid classes needs adjustment. The input field is not receiving enough space from its parent div due to the col-lg-4 class being applied. Changing it to col-lg-6 would give more room to its child divs.

Adjusting these classes will allow the textfield to expand:

col-xs-12 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3

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

How should we arrange these components to optimize the overall aesthetic of this particular design?

My current progress on the code: Visit this link Desired design for reference: View design picture here I've experimented with position relative and margins, but these techniques have impacted the responsiveness of my webpage. What is the most eff ...

What is the best method for decreasing the space between ordered list elements?

Help with removing unwanted top margin space I have been experiencing an issue where I am getting extra space above the list items when using a ul before an ol. The result is that only the unwanted space appears above the circle and number 1. I attempted ...

Tips for updating input placeholder text using CSS

Is it possible to change the placeholder text of an input textbox using only CSS? Here's the HTML code snippet: <div class="col"> <input class="form-control" type="text" placeholder="" id="m ...

What's the best way to make two buttons appear side by side on a webpage?

I need to have my two buttons, Update and Cancel, displayed next to each other on the same line. Currently, there is a gap between the two buttons as shown in the attached image. Below is the HTML code I am using: <div class="form_block span2"> ...

What might be causing the overflow of my page width by my navbar?

I am currently working on creating a product landing page for freecodecamp, and I'm facing some issues with my navbar - the first element I need to get right. Could you help me identify what's wrong with my code? Additionally, I would like to ad ...

What is the best way to create a border that surrounds a collection of pictures?

I'm currently facing a challenge in getting a border to perfectly fit around a collection of images. The issue can be observed in this Jsfiddle I shared, where the border aligns with the top and left edges, but not with the bottom and right edges. Her ...

Menu stack with content displayed to the right on larger screens

Given the content div's position (up middle), what method can I use to stack the divs in this manner? Is it possible to accomplish with only CSS or is jQuery necessary to move the div content out on larger screens? ...

What size should I use for creating a responsive website?

After scouring the internet, I stumbled upon numerous dimensions referred to as proper for developing responsive designs. However, I am specifically interested in identifying the ideal breakpoints, particularly for mobile devices with small screens like ...

The Disabled element does not exhibit effective styling

When we include the disabled attribute in the text element, the style does not work. Can you explain why? <input pInputText [style]="{'padding-bottom':'10px','padding-top':'10px','width':'100%&apos ...

A guide on altering the color of a badge through programming

I am curious to learn how I can dynamically change the color of a badge in Angular. My goal is to initially set the color of the badge to white, and then if the percVLRiskTotal reaches a specific value, change the color to green as an example. CSS: <sp ...

Error in Javascript programming | tracking progress bar

After stumbling upon this code snippet at this link, I was eager to delve deeper into the world of JavaScript and jQuery. However, upon implementing these codes, I encountered a perplexing issue. The progress bar and continue buttons seem to be non-funct ...

Is there a light font that cannot be replicated?

I attempted to replicate the font style used in this website's menu, but after implementing it into my WordPress CSS theme, the text still appears bold. Is there a particular technique I can use to achieve the lighter version of the font? I have loade ...

Javascript - issue with accurately retrieving element offset value while scrolling

My goal is to dynamically change classes for elements based on their position during scrolling. I am trying to calculate the top offset element value and adjust the classes accordingly. Here is the function I am using: handleScroll () { const header = ...

Activate vertical scrolling in JavaScript when an image is clicked

I currently have a collection of button images with different hover effects specified like this: <img src="home.PNG" onmouseover="this.src='homemo.PNG'" onmouseout="this.src='home.PNG'" /> My goal is to make them scroll down to ...

Background positioning in IE8 does not display as intended

I'm experiencing an issue with the image background not displaying in IE8. You can view the page here, and the arrows on the accordion are not visible. Here is the CSS: .closed h2.accordion_h3 { background: url(mysource_files/down.png) no-rep ...

Displaying the age figure in JSX code with a red and bold formatting

I have a webpage with a button labeled "Increase Age". Every time this button is clicked, the person's age increases. How can I ensure that once the age surpasses 10, it is displayed in bold text on a red background? This should be implemented below t ...

Having trouble interacting with element - Selenium WebDriver is not allowing the click

I'm attempting to select the Checkout Button. This is what it looks like : https://i.stack.imgur.com/TiMEO.png And here's the HTML snippet for it : <div id="buy-button-next"> <span data-reactroot=""> <div data-cid="buy- ...

Columns that adapt to different screen sizes while maintaining a fixed aspect ratio, limited to a maximum of two columns

I'm facing a challenge trying to blend a few elements together: My goal is to have two columns take up 100% of the browser width with a height that adjusts relative to this width. I want these columns to switch to one column when the viewport is sma ...

Explore the Shopify assistance on the secondary blog section within a separate page

Hey there, I'm looking for someone who is familiar with Shopify and can assist me. I am currently trying to set up a secondary Blog section on a separate page from my default 'Blog Page', but I'm encountering issues in displaying the a ...

Center the p tag vertically

To ensure the text inside the p tag aligns vertically in the middle, I've set a specific height for the tag. While this works perfectly for single-line text, it shifts to the top of the p tag when there are two lines of text. It's important to k ...