How to align textbox and button in footer?

button align right bootstrap 4
bootstrap button
how to align button in center
align button right
button align:center bootstrap
align button in row bootstrap
align button to bottom of div bootstrap
how to align buttons vertically in html

Currently stuck on how to align the textbox and button on the same line with 50% width (in footer), can anyone give me some sort or guide or able to fix this issue for me?

[Extra questions, any further support or guidance would be appreciated, Wireframe given for basic idea]

One being how to put spacing between the text and picture that are aligned below the navbar.

Below that, how to put a thin border for each separate picture and box of text.

(Sorry if i'm not allowed to ask extra questions)


You could use css flexbox to achieve the

"align the textbox and button on the same line with 50% width"

part Specifically, add

form .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

to your css file. I included the modified project below so that you could check the effect. More about CSS flexbox at here.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

.paragraph {
    padding: 5px;
}

.row {
    display: flex;
}

/* Create three equal columns that sits next to each other */
.column {
    flex: 33.33%;
    padding: 5px;
}


.footer {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    text-align: center;
}

form .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

input[type=text] {
    width: 50%;
    padding: 15px;
    margin: 5px 0 5px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">

    <title>Chollerton Tearooms</title>
</head>
<body>

<ul>
    <li><a class="" href="index.html">Home</a></li>
    <li><a href="index.html">Find out more</a></li>
    <li><a href="index.html">Credits</a></li>
    <li><a href="Wireframe.html">Wireframe</a></li>
    <li><a href="index.html">Admin</a></li>
</ul>

<div class="main-column">
    <div class="paragraph">
        <img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left">

        <h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.

</p>
    </div>
</div>

<br><br><br><br>

<div class="row">
    <div class="column">
        <img src="Craftshop.png" alt="Craft" style="width:100%">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
    </div>

    <div class="column">
        <img src="General%20Store.jpg" alt="Store" style="width:100%">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.

    </div>

    <div class="column">
        <img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.

    </div>
</div>

<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>

<form action="/action_page.php" style="border:1px solid #ccc">
    <div class="container">


        <input type="text" placeholder="Enter Email" name="email" required>


        <div class="clearfix">
            <button type="submit" class="signupbtn">Subscribe </button>
        </div>
    </div>
</form>



</body>
</html>

How to align buttons in Card footer in Bootstrap ?, Alignment of buttons in the Card footer is so much easy when you are familiar with the float element. How to align button to right side of text box in Bootstrap? Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more How to align text within a FooterTemplate cell in a GridView


You need to remove the button from it's own div block element and put inline with the input. I've set the .container div to 50% and centered aligned the input and button. To add space between your image and text, just and a margin to the right and bottom. And you can simple add a border attribute to your .column class to give a thin border:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

#holidayImg {
  margin: 0px 20px 20px 0px;
}

.paragraph {
  padding: 5px;
}

{
  box-sizing: border-box;
}

.row {
  display: flex;
}


/* Create three equal columns that sits next to each other */

.column {
  flex: 33.33%;
  padding: 5px;
  border: solid 1px #ccc;
  margin: 0px 5px;
  border-radius 4px;
}

.footer {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

.container {
  display: flex;
}

input[type=text] {
  padding: 15px;
  margin: 5px;
  display: inline-block;
  border: none;
  background: #f1f1f1;
  width: 50%;
}

.signupbtn {
  width: 50%;
  margin: 5px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="main.css">

  <title>Chollerton Tearooms</title>
</head>

<body>

  <ul>
    <li><a class="" href="index.html">Home</a></li>
    <li><a href="index.html">Find out more</a></li>
    <li><a href="index.html">Credits</a></li>
    <li><a href="Wireframe.html">Wireframe</a></li>
    <li><a href="index.html">Admin</a></li>
  </ul>

  <div class="main-column">
    <div class="paragraph">
      <img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left" id="holidayImg">

      <h1> Tearoom</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
        laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
        ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
        mi eget, dictum erat.

      </p>
    </div>
  </div>

  <br><br><br><br>

  <div class="row">
    <div class="column">
      <img src="Craftshop.png" alt="Craft" style="width:100%">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
        laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
        ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
        mi eget, dictum erat.
    </div>

    <div class="column">
      <img src="General%20Store.jpg" alt="Store" style="width:100%">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
        laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
        ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
        mi eget, dictum erat.

    </div>

    <div class="column">
      <img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
        laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
        ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
        mi eget, dictum erat.

    </div>
  </div>

  <div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>

  <form action="/action_page.php" style="border:1px solid #ccc">
    <div class="container">

      <input type="text" placeholder="Enter Email" name="email" required>

      <button type="submit" class="signupbtn">Subscribe </button>

    </div>
  </form>



</body>

</html>

How to align button to right side of text box in Bootstrap , As we want to align the button to the right side of the text box, we have to use the float-right class. Syntax: How to align buttons in Card footer in Bootstrap ? If you want to center text horizontally in an element then you’d use text-align: center. One option if you want to center it vertically and you have a fixed height footer and single row of text, set your line-height to be the same as the height of your footer. For example, if your footer is 100px then set line-height to 100px.


If I understand what you're asking, you can add another class as follows:

<div class="container">
    <input type="text" placeholder="Enter Email" name="email" required class="side-by-side">

    <div class="clearfix side-by-side">
        <button type="submit" class="signupbtn">Subscribe </button>
      </div>
</div>
// CSS added to get effect
    .container {
  width: 100%;
  float: right;
}
.side-by-side {
  display: inline;
}

This way it stays on 1 line and stays on the right side similar to your wireframe.

Left Align and Right Align Text on the Same Line, to the right on the same line. For example, in a footer, <div id="textbox"> <p class="alignleft">Text on the left.</p> <p class="alignright">Text  Click the worksheet to which you want to add specific header or footer elements. On the Insert tab, in the Text group, click Header & Footer. Excel displays the worksheet in Page Layout view. Click the left, center, or right header or footer text box at the top or the bottom of the worksheet page.


Computer Concepts and Microsoft Office 2013: Illustrated, Using Reports Access 90 Learning Outcomes • Align data within a control text box in the Category Footer, click the HOME tab, click the Align Right button in the pointer to resize the text box so that the data is aligned in the Duration column,​  Here are two ways of putting content into them: You can use presets to insert codes and formatting, or you can type text and insert codes manually into the headers and footers. To use a preset, do the following: On the Insert tab, click the Header button, or click the Footer button. Click one of the presets that appears on the list.


Microsoft Access 2013: Illustrated Complete, Using Reports Access 90 Learning Outcomes • Align data within a control text box in the Category Footer, click the HOME tab, click the Align Right button in the pointer to resize the text box so that the data is aligned in the Duration column,​  I'm trying to line up a footer I have on the sidebar of the page to the bottom of the page, but I can't seem to get it right in all browsers at once. If I line one up in FF, it isn't on Safari. Any suggestions? Screenshot HTML: Zedd by Catasphere CSS: footer { […]


Microsoft Office Access 2007-Illustrated Complete, Resizing and Aligning Controls After you add information to the appropriate section the Align Text Left, , Center , and Align Text Right buttons on the Design tab. click the text box with the Count expression in the Category Footer as well as  Horizontal alignment Bootstrap center (horizontal align) You can center any element (text, images, div, buttons) horizontally by using center utilities or flexbox. See the examples below to find out how.