What is causing the input tag and button tag to appear on separate lines instead of together?

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

Here is my HTML and CSS code:


<!DOCTYPE html>
<html>
<head>
 <title>assignment1</title>
 <meta charset="utf-8"> 
 <meta name = "description" content="assignment">
 <meta name = "keywords" content="php, assignment">
 <meta name = "author"   content="Kamal">
 <meta name = "viewport"   content="width=device-width, initial-scale = 1.0">
 <link rel="stylesheet" type="text/css"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href= "css/assignment1.css">
</head>
<body>
  <div class="container"> 
     <div class="row">
        <div class = "col-xs-12 col-xm-6">
           <img class ="img1" src="images/logo.png">
        </div>
        <div class = "col-xs-12 col-xm-6">
           <u class ="new"><p class ="new1"> Login to My Account</p></u>
        </div>
     </div>
     <div class="row">
        <div class = "col-xs-12 col-xm-12" >
           <form class = "k1">
           <input class = "new2" type="text" id="namef" placeholder="Search entire story here...." name="Search">
           <button type = "submit" class = "new3"><img src="images/search.png"></button>
           </form>
        </div>
      </div>  
     <div class="row">
       <div class = "col-xs-12 col-xm-12">
         <hr class = "new4">
       </div>
     </div>
   </div>
</body>
</html>

CSS Code:

body{background-color: #d7e7f4}
div.container{width:954px; background-color: #FFFFFF}
img.img1{margin-top: 25px; margin-left: 22px}
u.new{color:#007BAF}
p.new1{color:#007BAF; margin-top:-50px; margin-right:22px; margin-left:790px; font-size:14px}
form.k1{margin-top:-15px; margin-left:705px; margin-right:22px}
input.new2{ padding: 2px; font-size: 13px; border: 1px solid #007BAF; width: 64%;}
button.new3{border: none; background-color:#FFFFFF }
hr.new4{margin-top:100px; margin-bottom:1000px; border-top:4px solid black; border-radius:50px; width:954px}

The issue I am facing is that the webpage does not look as expected, especially with the input tag and search box placement.

htmlcss

Answer №1

Give this a shot

<div class="row">
        <div class = "col-xs-12 col-xm-12" >
           <form>
           <div class="form-row">
                <div class="col-auto">
           <input class = "new2" type="text" id="namef" placeholder="Explore the entire story here...." name="Search">
                </div>

                <div class="col-auto">   
                    <button type = "submit" class = "new3"><img src="images/search.png"/>
                </div>
               </div> 
           </form>
        </div>
      </div>

Answer №2

Welcome to your fully designed webpage. Simply copy and paste the code below:

HTML

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
  <div class="fluid-container">
    <div class="container"> 
        <div class="row">
            <div class = "col-xs-12 col-md-6 logo">
                LOGO
            </div>
            <div class = "col-xs-12 col-md-6">
                <div class="float-right">
                <a href="#" class ="login">Login to My Account</a>
                <form class = "k1">
                    <input class = "search-box" type="text" id="namef" placeholder="Search entire story here...." name="Search">
                    <button type = "submit" class = "search-btn">SEARCH</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class = "col-xs-12 col-md-12">
                <hr class = "new4">
            </div>
        </div>
    </div>
</div>
</body>
</html>

CSS

.fluid-container{
    background:#d7e7f4;
    height:100vh;
}
.container{
    background:#FFF;
    height:100vh;
}
.logo{
        padding: 15px;
}
.login{
    color: #007BAF;
    text-decoration: underline;
    display: block;
    padding: 12px 0;
}
.search-box{
      font-size: 16px;
    min-width: 200px;
    padding-left: 5px;
}
.search-btn{
        background: #007BAF;
    border: 0;
    padding: 3px 15px;
    color: #FFF;
}

OUTPUT SCREENSHOT

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

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

Ways to dynamically update a div with data from a JSON response

I'm currently in the process of developing a search platform. I have three static divs on the search results page that display certain content, all containing similar code. For example: <div id="result" class="card"> <img src="hello.png" ...

javascriptjqueryhtmlcssloops

Removing a session when the client has left

I wanted to simplify what I'm trying to achieve. Imagine two people have PHP sessions on a webpage. One person leaves the page while the other remains. After 60 seconds, the session of the person who left should be terminated automatically (like a ti ...

phpjavascripthtmlajax

What is the best way to choose all cells that begin, include, or finish with a specific term using JQuery/CSS?

I have a table with some cells and I am looking to utilize JQuery to select specific cells. For example: <td>John Doe</td> <td>John Doe1</td> <td>1John Doe</td> I want to select cells that start with 1, include Doe, a ...

javascriptjqueryhtmlcss

Aligning navigation text in a grid layout

I am currently working on evenly distributing my 8 navigation links across the navigation bar. Below is the HTML code for my navigation: <nav> <ul class="nav"> <li><a href="index.html">Home</a></li> < ...

htmlcssnavcentering

The Hamburger Menu in the Bootstrap Navbar is failing to collapse

My website uses Bootstrap v5.3 and I've added a navbar, but the hamburger icon is not collapsing on mobile devices when clicked. Can someone please review my code to see if there are any issues? I can't figure out what's wrong. <!DOCTY ...

htmlcssbootstrap-5

Chrome Experiencing Issues with Nested Divs

Having an issue with nested divs in Chrome <div id="wrapper"> <div id="content"> </div> </div> The wrapper div acts as a bordered container, forming a box. In Safari and Firefox, the content sits inside this box consistentl ...

htmlcssgoogle-chrome

Tips for making a website display in landscape mode rather than portrait orientation

As a newcomer to web design, I am curious if it is feasible to create a website that automatically rotates to landscape view when accessed on a mobile device. The current project I am working on is fluid in design, so this feature would greatly enhance t ...

javascriptjquerycss

The alignment of my Navbar Brand is off in my Navigation Bar and won't align to

<body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs ...

htmlcss

"Bootstrap4 - Troubleshooting the Issue of Multiple Carousels Not Function

I attempted to incorporate 2 Bootstrap 4 carousels onto a single page, but encountered issues with the functionality. I utilized this code on my page, however, the last element in the carousel does not cycle correctly. There is a delay of 3 transactions be ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for Implementing Large-Text Breadcrumbs with Heading Tags Using Bootstrap 5

I need assistance with creating large heading text breadcrumbs without breaking the layout. Any suggestions? <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bab7b ...

htmltwitter-bootstrapbootstrap-5

Extract the text without the HTML tags

I am facing a challenge where I need to extract a specific UL element from an HTML page that has the class cbs-list, while keeping all other elements within the LI tags intact. The structure of the HTML is as follows: <ul class="cbs-list"> <li> ...

jqueryhtmlsharepoint

Utilizing jQuery to Calculate Tab Scores

Last week, my teacher and I collaborated on a fun game called rEAndom game (). The game is created using javascript, jQuery, and HTML5. One interesting feature of the game is that when you press the TAB key, a div displaying the score appears. You can chec ...

javascriptjqueryhtmlcss

I utilized Bootstrap to validate the form, however, despite the validation, the form is still able to be submitted. What steps can I take to

I have implemented form validation using Bootstrap's 'needs-validation'. However, I am facing an issue where the form still gets submitted even when the validation fails. What I want is for the form submission to be prevented if the validati ...

javascriptjqueryhtmljinja2

Ion-row appears out of frame

This is a simple layout: <ion-content> <ion-grid *ngIf="loaded"> <ion-row> <ion-col>Stuff</ion-col> <ion-col>Stuff</ion-col> <ion-col>Stuff</ion-col> </ion-row> < ...

cssionic-frameworkionic2

Leveraging Javascript/Jquery for numbering items in a list

This is a snippet of HTML code that I am working with: <ul> <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li> <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li> <li data ...

javascriptjqueryhtml

How to remove previous and next buttons in product carousel using Bootstrap 3.3.5

Currently, I am tackling a small project and venturing into the world of bootstrap for the first time. I have hit a roadblock when it comes to disabling (not hiding) product carousel controls when the active state is on the item:first & item:last classes. ...

jquerycsstwitter-bootstrapcarousel

Struggling to align the Bootstrap list-group container in the middle

Good day to you! I'm currently working on a sidebar layout using Bootstrap's list-group and I need to set a specific width to ensure it aligns properly with the other elements above and below it. However, when I try setting the width to 300px, t ...

htmlcsstwitter-bootstrapbootstrap-4

Ways to make the submenu display underneath the main menu

Click here to view the menu It is important to note that you may need to expand the Result Box in order to see the full menu. The issue I am currently facing involves fixing a submenu that appears when hovering over the Men and Women <li> elements. ...

javascriptjqueryhtmlcssmenu

Add a fading transition feature to images that are loaded at a later time

I used a clever technique to create a blur effect by loading a small, lightweight image first. Once the main background image is loaded, it swaps out the 'data-src' with the actual image. However, I am facing an issue with the abrupt transition, ...

javascripthtmlcssimagedeferred

"Enhancing Your Website with a Preloader Loading GIF: Step-by-Step Guide

Can anyone assist me in implementing a preloader with a 'loading' gif image on my website that will display for a maximum of 5 seconds before the site fully loads? I've attempted various methods without success, so any help would be greatly ...

csshtmlbootstrap-4preloader