Learn how to align a form to the right using HTML, CSS, and Bootstrap

I am completely new to front-end technology. I have been attempting to write some code for my backend app using Html, Css, and Bootstrap. Currently, I am trying to place a search form on the right side of my webpage. Can anyone help me figure out what I am doing wrong?

Page view:

https://i.stack.imgur.com/woRQh.jpg

HTML:

<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" 
rel="stylesheet">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" style="color: white;">Students Manager</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- 
target="#navbarColor02" aria-controls="navbarSupportedContent" aria-expanded="false" 
aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse-navbar-collapse" id="navbarColor02">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" data-toggle="modal" data-target="#exampleModal">Add 
student <span class="sr-only">(current)</span></a>
        </li>
    </ul> 
    <div class="pull-right">
    <form class="form-inline my-2 my-lg-0">
        <input class="search" name="key" id="searchName" class="form-control mr-sm-2" 
placeholder="Search student....">  
    </form>
</div>
</div>
</nav>


//rest of the code

CSS file:

body{
 margin-top:20px;
 background: #f5f5f5;
}
.card {
  border: none;
 -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  margin-bottom: 30px;
}
.w-60 {
  width: 60px;
}


h1, h2, h3, h4, h5, h6 {
 margin: 0 0 10px;
 font-weight: 600;
}
.social-links li a {
  -webkit-border-radius: 50%;
  background-color: rgba(89,206,181,.85);
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: 30px;
  font-size: 12px;
}
a {
  color: #707070;
}

Any suggestions or understanding would be greatly appreciated.

Answer №2

Consider incorporating the following CSS snippet:

.pull-right {
    float: right;
}

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

Getting checkboxes from an HTML form in Django: A comprehensive guide

I am trying to create a form that displays checkboxes for each item in a list. Here is the structure of my form: <form action="/test"> <ul style="font-size:30px"> {% for d in Dlist %} <li type="none"><input typ ...

Issue with iOS 10: Changes to class not reflected in CSS/styles

Currently, I am utilizing Ionic with Angular to develop an application for Android and iOS. Surprisingly, everything functions smoothly on Android, but there seems to be an issue with iOS. I am employing a class change on an element using ng-class. I can ...

I require the box element within my section element to have a full-width layout

Looking at the code in the image, you can see that I am using MUI components. Within a section, there is a box containing navigation filter links. The red part represents the section, while the white inside is the navigation link bar. My goal is for this b ...

Adjust all children's height to match that of the tallest child

My nearly completed jQuery slideshow is working well except for one issue - the height of the slideshow remains fixed at the height of the first displayed slide, causing problems. View the issue here: . I have tried different jQuery solutions from StackOve ...

Creating a Map Using HTML and JavaScript

My current project involves creating a simple map that can be moved with mouse drag functionality, featuring images such as islands. I have successfully retrieved the mouse position by declaring variables posX and e.clientX, as well as for e.clientY. Howe ...

PHP code failing to save form information into database

I am experiencing difficulties with inserting form data into my database. The connection to the database is successfully established without any errors, but no information is being entered. Below is my code - any assistance would be greatly appreciated. ...

Deleting a division with the help of media queries

As a challenge, I am attempting to eliminate the .navbar-brand>img element once the screen size exceeds 768px by using media queries. Unfortunately, my efforts have not been successful so far. Although the styling applied to the img is successfully remo ...

Learn the process of using calc to rotate images on hover with CSS and Jquery

Is there a way to implement the rotate on hover function for images, similar to what is seen on this website under 'our Latest Publications'? I attempted using calc and skew, however, I was unsuccessful in achieving the desired hovering effect o ...

What is the best way to place tfoot at the top of the table

Below is the structure of my table: https://i.stack.imgur.com/QmlVn.png In the table, there are search input fields at the bottom of each column. I would like to move them to the top, right after the <thead> </thead>. The basic HTML code for ...

Obtain content from a div element using jQuery

Here is a snippet of HTML code that I am working with: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Demo</title> </head> <body> <script src="jquery.js"></script> <scri ...

Javascript isn't being executed by Internet Explorer as expected

I'm currently working on a web application that requires backend processing while simultaneously showing the information on the screen. AJAX seems like the ideal solution, so I've implemented it in my project. However, before initiating the AJAX ...

Animating an image in an HTML document by clicking a button through jQuery

I am trying to figure out how to make an image move from the left to the right of a page when a button is clicked. I thought the code below would work, but unfortunately, it's not functioning as expected. I'm new to JQuery and could use some guid ...

Add a CSS and jQuery hover effect to display text over an image, requiring users to click twice on their mobile device

I have a bunch of panels for different categories that change the background image when hovered over, display some introductory text, and lead to a URL when clicked. However, on mobile devices, you need to tap the panel twice to activate the URL. What I&a ...

What is the best way to choose the first parent element that includes a specific class within it?

I am searching for a method to identify the initial parent element that includes another element with a specified class within it. For instance: <div class="wrapper"> <div class="item"> <div class="inner-eleme ...

Align the button at the center of the carousel

While working on a personal HTML/CSS/Bootstrap 5 project as a self-taught learner, I have encountered some beginner doubts. My challenge is to ensure that the site remains responsive across various devices such as mobile and tablet. Specifically, I am stru ...

How can I incorporate a search bar or similar feature on my website that mimics the functionality of Ctrl+F?

Is there a way to incorporate a search bar on certain pages of my website that functions similarly to the Ctrl+F feature in Google Chrome? Essentially, I am looking for a "find" function that searches the entire page(s). My site is built using WordPress, ...

Combining strings with JQuery

Looking for help with a code snippet <script> function goToDetails($i){ $(function(){ var transValue = $('#trans'+$i).html(); var mileageValue = $('#mileage'+$i).html(); var engineValue = $('#eng'+$i).html ...

Adjusting the placement of elements according to the size of the screen?

I'm facing a very specific issue with my web page design and I need some ideas on how to solve it. The current structure of the page looks like this: <div class="row"> <div id="home-img" class="col-6"> ******An Image Goes He ...

The JavaScript jump function quickly moves back to the top of the webpage

Issue Resolved To prevent the view from jumping to the top of the page, I have implemented three options: Set the href attribute to href="#!" Set the href attribute to href="javascript:;" Pass the object to the event-handler and preve ...

The change() function in jQuery appears to have a glitch where it does not properly execute during the initial onclick event, but functions correctly for

Here is the button code snippet: <li class="cnt-li"> <button class="btn-container" title="Add Container" data-toggle="modal" data-target=".add-ctn-modal"> <img src="images/add.png" alt="Add Container"> </button> </li> ...