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

Create a stunning MUI App bar with a blurred effect below a fixed Navbar

Is there a method to apply a blur effect to the background of my material-ui AppBar component, creating a visually appealing overlay below the fixed navbar? I have experimented with using filter: blur(0) but it does not achieve the desired result. I am lo ...

rectangle/positionOffset/position().top/any type of element returning a position value of 0 within the container

While the height/position of the container is accurately displayed, attempting to retrieve the top position (or any position) of containing elements yields a return value of 0. Additionally, using .getBoundingClientRect() results in all values (top, left, ...

Finding your current location and address using HTML5 geolocation

My web application utilizes HTML5 geolocation to obtain latitude and longitude coordinates. I am looking for a way to convert these coordinates into actual addresses whenever possible. Once that is done, I need to save the address information into a MySQ ...

Height not being generated by Div element

I am encountering an issue with a div element that contains an h2 and three nested div elements. Despite not explicitly setting a height for the container div, it is not expanding to accommodate the varying heights of the inner divs. This problem is causin ...

What is the best way to find the right construction match?

Currently, I am in the process of parsing text and looking to match a specific type of text that I want to remove entirely. The format of the text I am trying to target is as follows: <tr class="label-BGC"><td colspan="4">any content here</ ...

Creating an element that remains fixed once it reaches a distance of 50px from the top of the screen

Hey there! I'm working with an html div element that currently scrolls along with the page, but I was wondering how I can make it become fixed once it reaches a distance of 50px from the top of the screen. Any ideas on how to achieve this? Just to pro ...

Delete the browsing cache in Internet Explorer from an external source

Currently, I am working on developing an ASP.NET application using Visual Studio. However, a persistent issue I am facing is that every time I launch the application, Internet Explorer caches certain CSS and JS files. This forces me to manually clear the c ...

displaying an item within a text field

I have an input box created using Angular reactive forms <input type="text" formControlName="OrgName" placeholder="Enter name" maxlength="60"> <p class="fieldRequired" *ngIf="showNameMSg" ...

After loading ajax content onto the page, the scroll bars fail to appear

I am currently constructing a website that loads page content through ajax. Everything seems to be functioning perfectly, except for a peculiar issue I have encountered in Chrome and Safari. Surprisingly, it is working flawlessly in IE! The problem lies i ...

Looking for assistance with troubleshooting CSS issues specifically in Internet Explorer

Hey there! I've been working on a landing page and it's looking good in Safari, Firefox, and Chrome. The only issue is that the layout is all messed up in IE (any version). If any of you experts could take a look at it and give me some suggesti ...

Can you define the "tab location" in an HTML document using React?

Consider this component I have: https://i.stack.imgur.com/rAeHZ.png React.createClass({ getInitialState: function() { return {pg: 0}; }, nextPage: function(){ this.setState({ pg: this.state.pg+1} ) }, rend ...

Adjusting the appearance of a JavaScript element based on its hierarchy level

Currently, I am utilizing Jqtree to create a drag and drop tree structure. My main goal is to customize the appearance of the tree based on different node levels. Javascript Tree Structure var data = [ { name: 'node1', id: 1, chi ...

What is the method for incorporating jQuery UI effects into buttons that are imported from a basic HTML document?

I am continuously updating the content on my website in three distinct ways: 0) Utilizing jQuery's getJSON('bla.json') to read JSON files; 1) Fetching JSONized C#/Razor classes via jQuery's getJSON('bla.cshtml'); 2) Loading H ...

Discovering MaterialUI breakpoints within CSS styling

Working on a create-react-app project, I have incorporated material-ui 1.x and customized the theme with unique breakpoints... import { createMuiTheme } from '@material-ui/core/styles'; let customTheme = createMuiTheme({ breakpoints:{ val ...

Troubleshooting a problem with jQuery waypoints in a static HTML/JS

Utilizing waypoints and windows to display the panels similar to the fiddle example I have created: http://jsfiddle.net/6bMMa/1/ Everything is functioning correctly, however, I have only managed to make it work by using id numbers on the panel divs. The ...

I currently have some code for a toggle button and a collapse feature, but I'm struggling to integrate the two

I need assistance with implementing a toggle animation I found here: https://codepen.io/7harrypotterrr/pen/OrBwPY. I'm unsure how to apply it to my code and replace the current toggle button that is in use here: https://codepen.io/7harrypotterrr/pen/e ...

css center arrow-aligned underline text

Trying to emphasize my text with an additional arrow centered on the line is proving to be a challenge. When attempting this, the text does not align in the center of the page. .souligne { line-height: 17px; padding-bottom: 15px; text-transform: u ...

How to style a div to center an image vertically with text using CSS

I attempted to vertically align an image next to text within my link. Thus far, I've relied on a background image to achieve perfect vertical centering for the image of my text. CSS .label { margin: 0 0 0 15px; padding: 0; color: #fff; } a.morein ...

CodeIgniter - Utilizing quotes within a form

Consider a scenario where the database has a field named NAME which contains text with both single and double quotes: TEST1 "TEST2" 'TEST3' Now, if you want to edit this value using the following code in a form: <label for="name">Ful ...

JavaScript function unable to access static file for image

I need assistance with dynamically displaying an image (a checkmark or "X") based on a variable. When I insert the image using a script directly in the HTML file, it functions correctly. However, when attempting to set the image from within the createEasyD ...