The desired outcome is not showing up as expected in the HTML coding

<!DOCTYPE html>
<head>
  <link href="https://fonts.google.com/specimen/Poppins?preview.size=20" rel="stylesheet">
</head>
<body>
  <header class="header">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-12">
          <h1>Kalyan The Coder</h1>
        </div>
      </div>
    </div>
  </header>
  <div class="main">
    <div class="container">
      <div class="row">
        <form class="form">
          <div class="col-xs-8 col-md-10">
            <input type="text" id="TextBox1" placeholder="Enter your query">
          </div>
          <div class="col-xs-4 col-md-2">
            <button type="submit" class="button">post</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

After implementing this code, I encountered an issue where the button does not display next to the input box as expected. Instead, it appears below the text input box. I have tried placing the button inside the form element but still no success.

htmlcssbootstrap-4

Answer №1

You have included bootstrap classes in your code, but they are not properly linked/imported into your html file. To fix this, please add the following:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

The correct setup should look like this:

<!DOCTYPE html>
<head>
  <link href="https://fonts.google.com/specimen/Poppins?preview.size=20" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <header class="header">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-12">
          <h1>Kalyan The Coder</h1>
        </div>
      </div>
    </div>
  </header>
  <div class="main">
    <div class="container">
      <div class="row">
        <form class="form">
          <div class="col-xs-4 col-md-8">
            <input type="text" id="TextBox1" placeholder="Enter your query">
          </div>
          <div class="col-xs-4 col-md-2">
            <button type="submit" class="button">post</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

Answer №2

You have separated the two form elements into individual div containers, causing them to display as block elements. Simply combine them into one:

<!DOCTYPE html>
<head>
  <link href="https://fonts.google.com/specimen/Poppins?preview.size=20" rel="stylesheet">
</head>
<body>
  <header class="header">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-12">
          <h1>Kalyan The Coder</h1>
        </div>
      </div>
    </div>
  </header>
  <div class="main">
    <div class="container">
      <div class="row">
        <form class="form">
          <div class="col-xs-8 col-md-10">
            <input type="text" id="TextBox1" placeholder="Enter your query">
            <button type="submit" class="button">post</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

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

Modify the CSS preferences using an object that has been obtained

After the user selects options from a form, I am trying to update my CSS using the settings received from an object. However, I am unsure of how to implement this layout change. Here is a glimpse of my template: div class="btn btn-primary" ng-click= ...

javascriptcssangularjsbackground

The Bootstrap table spills off the page and the navbar fails to align properly with the screen

A complex question awaits your attention. I must clarify that I lack the expertise of a professional web developer. I have already attempted the solutions referenced here and here The provided image represents the mobile view, whereas the desktop view app ...

htmlcssbootstrap-4

Removing the dividing line between columns in an Antd table: A simple step-by-step guide

Do you notice the lines dividing each table column heading in the image? I want to get rid of these lines from the table. The table component I am using is Antd table. https://ant.design/components/table#examples https://i.stack.imgur.com/Npx5G.png ...

cssreactjsantdant-design-proant-design-vue

Footer div is being covered by the page

I am currently working on a website built with "WordPress", and I have implemented a mobile footer plugin that is designed to only appear on mobile devices. However, I am encountering an issue where the page content overlaps the footer on phones. I attemp ...

javascriptjqueryhtmlcsswordpress

Unusual Blank Space in HTML CSS Design

While working on my website, I noticed a peculiar white space appearing at the bottom of the page, but only when using Internet Explorer. Safari looks fine. I am currently using IE8. I would like the white background to end after the black navigation link ...

htmlcss

Tips on keeping an HTML element from shifting when resizing the browser window (how to lock an element in a specific position on a webpage)

As a newcomer to front-end web development, I recently attempted creating a basic responsive page. While working on this project, I encountered an issue with the candle holder image. This image is size-responsive, meaning it adjusts in size as the browser ...

htmlcss

Creating a Top Navbar with Fixed Position and Container Specifications in Bootstrap 4

When creating a Bootstrap 4 Navbar, it defaults to having the properties of a container-fluid instead of container. How can one change it to have the properties of a container? <nav class="navbar fixed-top navbar-light bg-faded"> <a class="navb ...

twitter-bootstrapnavbootstrap-4twitter-bootstrap-4

What is the best way to position elements on a bootstrap card?

Welcome to my first post! I'm currently experimenting with Bootstrap 5 to create some stylish cards. One of the challenges I'm facing is achieving uniform width and height for all the cards. Specifically, I want all my cards aligned based on a ...

cssbootstrap-5

Utilize itextsharp to transform HTML into PDF files

When I try to convert HTML to PDF using iTextSharp, the CSS styling I apply to the webpage does not get carried over to the converted PDF file. Here is the CSS code I am using: <style type="text/css"> .cssformat { ...

c#htmlasp.netcsspdf

Ways to eliminate spacing between two select boxes?

Hey everyone, I'm sure we've all encountered this issue before and can agree that it's pretty annoying. Does anyone have a solution for removing the white space from select boxes? <select> <option> testing </option& ...

htmlcss

Creating Apps for Windows Phone 8 with PhoneGap

Looking to create a Windows Phone 8 app using Phonegap? I've successfully used Phonegap for Android and iOS, but it seems like there are some prerequisites for developing WP8 apps with phonegap: Node.js Windows Phone SDK IE10 A 64-bit version of Win ...

htmlcordovawindows-phone-8hybrid-mobile-appvisual-studio-cordova

Add a CSS class to the text that is selected within a Content Editable div

Hey there, I'm having an issue where the class is being applied to the button when pressed instead of the selected text. Here's my current code: The button needs to be a div, but it might be causing the problem. I just want the highlighted text ...

javascriptjqueryhtmlcsscontenteditable

Make sure to pause and wait for a click before diverting your

Having an issue with a search dropdown that displays suggestions when the search input is focused. The problem arises when the dropdown closes as soon as the input loses focus, which is the desired functionality. However, clicking on any suggestion causes ...

htmlcssangulartypescript

Is there a way to adjust the title length so that it can change dynamically?

https://i.sstatic.net/Tu9QM.pngCurrently, the title has a fixed background color which may widen if the resolution is smaller than the original size. My aim is to create a dynamic background color that adjusts based on the resolution. Regardless of wheth ...

htmlcsshighcharts

Having trouble with your website not adjusting properly when resizing the browser or viewing it on a mobile phone

My website is not adapting properly to different screen sizes, even after I have added the META tags below. Any advice would be appreciated. Thank you. HTML <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8> ...

htmlcssmeta

Implementing Jquery to Repurpose a Function Numerous Times Using a Single Dynamic Value

Important: I have provided a functional example of the page on my website, currently only functioning for the DayZ section. Check it out here Update: Below is the HTML code for the redditHeader click event <div class="redditHeader grey3"> & ...

javascriptphpjqueryhtmljson

Fading in and out occurs several times while scrolling through the window

My goal is to update the logo image source with a fadeIn and fadeOut effect when scrolling up or down. The issue I'm facing is that the effect happens multiple times even after just one scroll, resulting in the logo flashing many times before finally ...

javascriptjqueryhtmlscrollfade

Using the GetElementByID method to target a textarea element

I attempted to submit form data through TinyMCE, but the script is returning the old value instead of the new one. Here's the form code: <form> <textarea id="tml" name="template_content" class="editor_large">{$template_content|escape ...

javascriptphpjqueryhtmlcss

The 'refresh' function in jQM listview is causing issues with inset lists

For some reason, I am struggling to understand why this issue is occurring: In jQuery Mobile, I have an unordered list with data-inset="true". Initially, it displays perfectly with rounded top and bottom edges. However, on dynamically adding new elements t ...

jqueryhtmlcssjquery-mobile

Why is my Bootstrap 4 dropdown menu not appearing on the page?

I've been trying different codes, but no matter what I do, my Bootstrap dropdown menu isn't appearing. There is an arrow next to it, but nothing shows up when pressed. If anyone could point out what I did wrong in the code or what might be causin ...

bootstrap-4drop-down-menu