Tips for aligning the Bootstrap inline form in the center of the webpage

Is there a way to center align my form in such a way that the input box and button appear in the same row? I've tried the code below, but for some reason they don't display inline. Can anyone provide a code sample to help me achieve this? Your assistance is greatly appreciated.

index.html code

  <section class="sec1 container-fluid mt-3 pd-5 ">
  <h2 class="mt-5">Newsletter</h2>
  <p>Subscribe to this news letter to get the latest news about us</p>
    <form class="form-inline mt-2" action="/actionPage.php">
      
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      
      <button type="submit" class="btn btn-dark btn-sm">submit</button>
    </form>
</section>

style.css code

.sec1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: #faf8fb;

}

Output Image

https://i.stack.imgur.com/h5J7b.png

I am looking for a solution to have both the input box and button appear on the same row when the form is centered. Any suggestions would be greatly appreciated. Thank you!

htmlcssformsbootstrap-4inline

Answer №1

If you want to align the input box and button in the same row (inline), you can utilize the display:flex property within the form. See the code snippet below for implementation:

.sec1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: #faf8fb; 
padding: 20px;
}

.formHolder  {
  display: flex;
  width: 100%;
  max-width: 270px;
}

.formHolder .form-control {
  flex: 0 0 calc(100% - 80px);
  max-width: calc(100% - 80px);
}

.formHolder .btn { 
   flex: 0 0  80px;
   max-width:  80px;
}
<section class="sec1 container-fluid mt-3 pd-5 ">
  <h2 class="mt-5">Newsletter</h2>
  <p>Subscribe to this news letter to get the latest news about us</p>
    <form class="formHolder form-inline mt-2" action="/actionPage.php">
      
        <input type="email" class="form-control" id="email" placeholder="Enter email">      
         <button type="submit" class="btn btn-dark btn-sm">submit</button>
    </form>
</section>

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

Retrieve the HTML tag content as a string using jQuery

For my OSINT project, I am developing a tool that needs to extract text from a specific HTML code string. $("p").text(); I'm looking for a way to make my variable work with the above code. Any suggestions? Share your ideas! Solution: $.ajax({ ...

jqueryhtmljsonparsing

Display a div based on search results

I recently encountered an issue with a script that needs modification to display different divs based on search criteria. Originally, I used this script for a contact list but now need it to perform another function. View the original code (JSFiddle) Here ...

javascriptjqueryhtml

Impact of designs on the elements within components

Here's a CSS query I have: If I have the code below, does the styling apply to the contents of v-container but not v-container itself? <v-app id="inspire"> <v-container justify-center style="max-width: 1200px"> <v-layout row ...

cssvue.jsvuetify.js

Tips for positioning three child divs horizontally within a parent div with flexible dimensions and arranging each one separately

Is there a way to stack three divs horizontally within a fluid-width container div, with each child div scaling proportionally when the browser is resized for responsive design? The left-most div should be on the left, the middle div centered, and the righ ...

htmlcssresponsive-designfluid-layout

Avoiding the appearance of a scrollbar when content extends beyond its containing block

I am struggling with writing markup and CSS to prevent a background image from creating a scrollbar unless the viewport is narrower than the inner content wrapper: The solution provided in this post didn't work for me: Absolutely positioned div on ri ...

htmlcssscrollbarbrowser-scrollbars

Ways to prevent styles from being overridden by those specified in JavaScript

Some elements on my page have their style dynamically changed by JavaScript. However, I want one of them to maintain its static style without being overridden. Is there a way to specify that the style of this particular element should not be altered? Than ...

javascripthtmlcss

Error: The JSON in app.js is invalid due to the unexpected token "C" at position 0

When I try to run this code snippet, I sometimes encounter an error message that says: SyntaxError: Unexpected token C in JSON at position 0. function fetchData(user_country) { fetch(`https://covid19-monitor-pro.p.rapidapi.com/coronavirus/cases_by_day ...

javascripthtmlfetch-api

Finding the width or height of an image that is dynamically determined by its proportions using JQuery

Using the "img" tag with only a width value in CSS will automatically calculate the height proportionally. However, finding the height value using developer tools or jQuery's height() method may not work as expected. See the example below: HTML code ...

jquerycssimageheightwidth

What are the best strategies for creating HTML website designs that are both scalable, adaptable, and versatile?

As a beginner in HTML website design, I have recently started using HTML, CSS, jQuery, and JavaScript for designing websites. After creating a site with almost forty webpages, the client requirements are changing, requiring changes to be made across all ...

javascriptjqueryhtmlcss

Is the DOMContentLoaded event connected to the creation of the DOM tree or the rendering tree?

After profiling my app, I noticed that the event is triggered after 1.5 seconds, but the first pixels appear on the screen much later. It seems like the event may only relate to DOM tree construction. However, this tutorial has left me feeling slightly con ...

javascripthtml

Creating distinct identifiers for table cells utilizing the map function

Is there a way to assign a unique id to each MenuItem using the map() function nested within another one? <table className={classes.table}> <thead> <tr> <td /> {sit.sit.map(sit => ( <td className={ ...

javascripthtmlreactjsmaterial-uijsx

Tips for setting up a popup menu when clicking a button on a webpage

I am currently working on developing a popup menu with a greyed-out background that appears when the user clicks on a button in React. My code implementation is as follows: // The ifButtonClicked function is called when another button is clicked // Some ...

javascripthtmlreactjs

Is there a way to leverage JavaScript to click on one div and modify the settings of another div simultaneously?

I am struggling with my code which has unnecessary information. <div> <div id="one" class="button"></div> <div id="two" class="button"></div> </div> <div> <div class="Home tab"> < ...

javascriptjqueryhtmlcss

Adding elements to a roster

Can anyone assist me with appending data from a csv file to an unordered HTML list? The csv file I have contains both single and grouped data for the list, as seen below: Test Group Name A,Test Link Name 1,Test URL 1 Test Group Name A,Test Link Name 2,Tes ...

javascriptjqueryhtml

Ways to establish a default search outcome in a search box

Looking to create a search bar with JavaScript and JSON to display default search results for visitors. Currently, the search bar only shows results after text is removed. How can I show predefined search results when the page is loaded? const search = ...

javascripthtmljson

Is it possible for me to create a menu using the .row and .col classes from Bootstrap?

I attempted to create a menu using Bootstrap's cols. Something similar to this: https://i.stack.imgur.com/55xst.png However, I faced numerous challenges when trying to implement it into Wordpress and realized that it may not be the best approach... ...

htmlcssmenutwitter-bootstrap-3

If the image is not found, deactivate the anchor or hyperlink

I am encountering an issue where I have an image tag within an anchor element setup as shown below: <a href='$image'><img alt='No Image' src='$image'></a> When the image is not available, I can still intera ...

javascriptjqueryhtmlimageanchor

"Enhancing User Experience by Enabling Full Clickability on List Items

I am working on a hamburger menu with a dropdown feature, and I want the entire dropdown menu to be clickable instead of just the text. Below is my current code which only allows clicking on the text. cshtml <nav class="navbar fixed-top navbar-dark bg ...

htmlasp.net-mvcrazorbootstrap-4

The navbar expands in height when resized

I've been working on creating a responsive navbar, but I'm facing an issue where the height of the bar doubles between phone screen size and full window size. Despite trying various Bootstrap classes, I haven't had any success in fixing this ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to create a 3x3 grid layout with 9 input text boxes that do not have a double border thickness?

I am having trouble creating an input square with 3 rows and 3 columns. The borders between each two input boxes are overlapping, resulting in a double thickness border. To see this issue in action, you can run the provided html. How can I fix this so that ...

htmlcssborder