It is not possible to place the input and submit form in the center of the container

I'm looking to center a form within a container and make the input bar half the width of the container. Check out my code below.

<div id="sub" class="col-6 d-flex justify-content-center">
            <div class="d-flex">
                <form id="form" action="https://www.freecodecamp.com/email-submit.">
                    <div class="form-group">
                        <input id="email" class="form-control text-center" type="email" placeholder="Enter your email">
                    </div>
                    <div class="d-flex justify-content-center pt-3">
                        <input id="submit" class="btn btn-primary" type="submit">
                    </div>
                </form>
            </div>
        </div>
htmlcssbootstrap-4

Answer №1

Could you please arrange your code in rows?

<div class="container">
  <div class="row d-flex justify-content-center">
    <div id="sub" class="col-6">
      <div class="d-flex">
        <form id="form" action="https://www.freecodecamp.com/email submit.">
          <div class="form-group">
            <input id="email" class="form-control text-center" 
                          type="email" placeholder="Enter your email">
          </div>
          <div class="d-flex justify-content-center pt-3">
            <input id="submit" class="btn btn-primary" type="submit">
          </div>
        </form>
      </div>
    </div>
  <div>
</div>

Answer №2

Here is a solution for you.

#sub{
  width:100%;
  border:1px solid #ccc;
  height:400px;
  align-items:center;
}

.form-wrapper{
  width:50%;
}

input{
  width:100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div id="sub" class="d-flex justify-content-center align-items-center">
    <div class="form-wrapper">
        <form id="form" action="https://www.freecodecamp.com/email-submit.">
            <div class="form-group">
                <input id="email" class="form-control text-center" type="email" placeholder="Enter your email">
            </div>
            <div class="d-flex justify-content-center pt-3">
                <input id="submit" class="btn btn-primary" type="submit">
            </div>
        </form>
    </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

Exploring the different types of form elements in HTML5 with Zend

Is there a straightforward method to incorporate HTML5 Form elements into a Zend Form? Using createElement('tel','phone'); doesn't seem to be effective since Zend doesn't currently support HTML5 form elements. It's also n ...

htmlzend-form

Adjusting Position for Parallax Effect using Jquery

I am currently experimenting with a basic Scrolldeck Jquery Parallax effect to scroll items at varying speeds. However, I am encountering some difficulties in making items move from top to bottom. In the example provided below, you will see a shoe moving f ...

jquerycssparallax

Html5 canvas not resizing to fit container

I'm currently working on creating a square canvas using CSS to ensure it is instantly sized when the page loads. To achieve this, I am wrapping the canvas in a div and applying the following styles: http://jsfiddle.net/evopgwzd/ body { backgrou ...

csshtmlcanvashtml5-canvas

Customize the width of grouped input fields in Bootstrap without relying on the grid system

I recently attempted to construct fields with combined input in Bootstrap. Despite successfully doing so, I am now faced with the challenge of setting the width of the input boxes. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/b ...

javascripthtmltwitter-bootstrap

How to Center a Button in a Menu Using CSS

I've been struggling for a while now trying to design a menu with standard buttons on the left and a single button on the right. I've experimented with various techniques using ul li and applying styles like float, but nothing seems to work! No m ...

cssmenu

Avoiding the overflow of the y-axis by applying a slight left margin to bootstrap columns

Context: I'm in the process of developing a collapsible sidebar navigation menu inspired by the bootstrap admin panel example found at: Issue: Upon collapsing the admin bar, a small bar of icons appears. To accommodate this, I added margin-left: 50 ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

How can I use JavaScript to find a keyword on a webpage that is not located within an <a> tag or its href attribute?

I'm on a mission to locate a specific keyword within a webpage. Sounds simple, right? Well, here's the tricky part - I need to disregard any instances of this keyword that are nested within an <a> tag. For example: <p>Here is some s ...

javascripthtmlregex

Maintain visibility of adjacent elements while one is being hovered over

Take a look at this demonstration: https://jsfiddle.net/ptss94gw/ I'm curious if it can be achieved using only CSS to maintain visibility of the .more-icons division when hovering outside of the .h-icon. ...

htmlcsscss-selectors

Can JavaScript impact the appearance of the printed version of a website?

Just a quick question - I currently don't have access to a printer. My client is wondering if the hidden elements of the webpage (items that are only visible when clicked on) will be included when printing or if they will remain hidden? ...

javascripthtmlcssprinting

Troubleshooting issue with Bootstrap and React: navbar toggle function not functioning properly

Hey there, I've encountered an issue while working with my stateless component and trying to integrate Bootstrap into my code. Everything was good when I coded it in vanilla HTML/CSS and JS, but now I'm having trouble with the data-target="#navig ...

javascriptreactjsbootstrap-4

Clicking is not causing the Simple Modal to appear

I'm facing an issue with the modal on my website. Initially, it was working fine and showing up when I clicked the button. But now, for some reason (which I can't figure out), the modal box refuses to open. The layout of my page consists of an i ...

javascripthtmlcsssimplemodal

Including Previous & Next Buttons in Product Categories

I have set up the display of category products on the home page using the block below: {{block type="catalog/product_list" template="catalog/product/home_short.phtml" category_id="5" column_count="6"}}. I now want to include previous and next buttons to ...

phpjqueryhtmlcssmagento

Alter global table data attributes through device detection with Javascript

Initially, I assumed that setting the global font-size of all td's would be a simple task. However, I am having trouble finding a solution. In my existing stylesheet, I have defined the font-size for all td's. td { font-size: 20px; ...

javascripthtmlcss

A method for altering the values of HTML form checkboxes by toggling between checked and unchecked states, followed by transferring those values to the clipboard

Hello everyone, I'm new to coding and seeking some assistance with a problem I've encountered. My goal is to create a multi-input form with checkboxes, allow the user (me) to fill it out, and then click a "copy" button to transfer the values to t ...

javascripthtmlcheckboxcopyexeccommand

What could be causing my Bootstrap 4 modal not to appear?

<head> <meta charset="utf-8" /> {% load staticfiles %} <link rel='stylesheet' href="{% static 'homepage/css/bootstrap.min.css' %}"> <link rel='stylesheet' href="{% static 'homepage/css ...

javascripthtmlcssbootstrap-4web-deployment

Error encountered using Meteor 1.3 autoform/quickform integration

Having recently transitioned to using Meteor 1.3, I've encountered a few challenges related to debugging due to missing imports or exports in tutorials. This particular issue seems to be in the same vein. I wanted to incorporate the autoform package ...

javascripthtmlmeteormeteor-autoformquickform

Ways to retrieve attribute value in Selenium python without the use of .get_attribute() method

I am new to posting questions, so please let me know if I need to provide more clarification. I am also a beginner in Python, so I hope that I am using the right terms to phrase my question. Essentially, I have developed a customizable web scraper that re ...

pythonhtmlcssselenium

Having trouble relocating the navbar logo to the left side

I've been struggling to adjust the logo position by moving it slightly to the left, but all my attempts so far have failed. Initially, I thought the issue might be due to the .main_nav_container or the container and a <div col-lg-12> wrapping, ...

htmlbootstrap-4alignmentnavbar

Tips for creating a multi-line text field with ellipsis using a div in CSS

Similar Question: How to Insert Ellipsis in HTML Tag for Content that is Too Wide Using CSS to Display “…” on Overflowing Multiline Blocks Hello, I am attempting to create a div tag to present a question. The size of this div bo ...

csshtmltextellipsis

Can an element be visible on the page even if it doesn't have a defined height and width

I came across a piece of code in an existing Selenium automation framework that checks for the width and height of an element before determining if it is interactable. It seems like the element can only be clicked or double-clicked if both its width and he ...

htmlcssseleniumselenium-webdriverdom