What steps should be taken to position the Header and search bar in the middle of the screen?

How can I center the title and search bar on a website using Bootstrap? I've tried adding my-auto, but it doesn't work. Any suggestions?https://i.sstatic.net/3uuhT.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>;

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="stylesheet.css" rel="stylesheet">
    
  </head>
  <body>
   <div class="container" style="margin-top: 8%;">
       <div class="col-md-6 col-md-offset-3">     
        <div class="row">
              <div id="logo" class="text-center">

              <h1>Movie</h1>
       
              </div>
           <form role="form" id="form-buscar">
             <div class="form-group">
               <div class="input-group">
                 <input id="1" class="form-control" type="text" name="search" placeholder="Search..." required/>
                 <span class="input-group-btn">
                   <button type="button" class="btn btn-outline-primary">Search</button>
                   <i class="glyphicon glyphicon-search" aria-hidden="true"></i>
                 </span>
               </div>
             </div>
          </form>
         </div>            
       </div>
       <p>movie!</p>
    </div>
      
      
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Answer №1

To center the content, you can utilize the display:flex; property.

.container{
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
text-align: center;
}
<div class="container" style="margin-top: 8%;">
       <div class="col-md-6 col-md-offset-3">     
        <div class="row">
              <div id="logo" class="text-center">

              <h1>Movie</h1>
       
              </div>
           <form role="form" id="form-buscar">
             <div class="form-group">
               <div class="input-group">
                 <input id="1" class="form-control" type="text" name="search" placeholder="Search..." required/>
                 <span class="input-group-btn">
                   <button type="button" class="btn btn-outline-primary">search</button>
                   <i class="glyphicon glyphicon-search" aria-hidden="true"></i>
                 </span>
               </div>
             </div>
          </form>
         </div>            
       </div>
       <p>movie!</p>
    </div>

Answer №2

If you're seeking a solution, consider using flexbox. To enhance the

<div class="row">
, incorporate the following styles:

display: flex;
flex-direction: column;
align-items: center;

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

How can I easily add both horizontal and vertical arrows to components in React?

Creating a horizontal line is as simple as using the following code: <hr style={{ width: "80%", border: "1px solid black" }} /> You can customize the width, length, and other properties as needed. If you want to display an arrow ...

The background-size property does not function properly when used in combination with the box-sizing property set to

Currently seeking assistance with creating a responsive background image with an inner border in a circle. I have successfully used background-size: cover in fixed dimension <div>s, but I am facing a challenge with creating a transparent inner borde ...

Executing Multiple setTimeout jQuery in a Class: A Comprehensive Guide

Is there a way to hide elements with the class .content and the attribute .data-time using the setTimeout() function in jQuery? Here is the HTML code: <div class="content first" data-time="200"> </div> <div class="content second" data-time ...

"Discovering the active span tag in a webpage: A step-by-step guide

I have a main anchor tag with two span tags inside, each with a different class name as shown below. <a class="clickSlide" id="btnmain_login" href="/"> <span class="Icohide"></span> <span ...

"Add a +1/Like/Share feature to enhance the user experience of your mobile web

In the process of developing a web-based mobile application with jQuery Mobile. Looking to incorporate buttons for "+1" and "Share" (for Google+) as well as "Like" and "Share" (for Facebook), but each button utilizes a popup window which goes against crea ...

Distorted text created by fillText on canvas in Chrome

When attempting to write text on canvas, I noticed that the text appears jagged, especially in Chrome 31.0.1650. I have experimented with -webkit-font-smoothing:antialiased,text-shadow but without success. Does anyone have a solution to this issue? Thank ...

Creating a gradient effect on the entire background using CSS3

My background CSS gradient is not displaying properly when using jQuery for a drop-down menu. The background appears to be repeating. Here are the body properties: html { height: 100%; } body { height: 100%; background-repeat: no-repeat; ...

Creating a Client-side Web Application with Node.js

As I search for a versatile solution to bundle an HTML5 web application (without server dependencies) into a single executable app using node.js and the Linux terminal on Ubuntu, I have experimented with tools like wkpdftohtml and phantomjs. However, these ...

Tips for making my modal function properly?

I've encountered an issue with adding two modals to my website. The first modal works perfectly fine, but the second one is not functioning as expected. When I click on the button for the second modal, the background dims as it should, but the modal i ...

Dragging an image in KineticJS gets stuck after the drag operation is completed

My experience with KineticJS has been positive so far, but I have encountered an issue with dragging images. In the example below, I have set the image to be draggable, but after the initial drag, it seems like the image can't be moved again. var sta ...

What is the best way to include a PHP variable in a query?

In this scenario, I am constructing a query with an inner join to encompass all of my tables. However, I am seeking a way to embed $id_foro directly into the query, where id_foro is a component of equipo01_foros. Is it possible to establish a relationship ...

The alignment of columns in the fixed header table is off since it does not contain the necessary <thead> and <tbody> elements

On my page, I have three tables, with one of them containing a large amount of data. To make it easier to read, I decided to have a fixed header for the table. However, I am facing an issue where the columns in the thead (header) and tbody (body) are not a ...

display a visual element within a function using reasoning

I am trying to display an image based on a specific condition in my code, for example: if(x==1) { showImage }. However, I am facing an issue where the web content is not displayed until the image is fully loaded. What I want is for the image to appear smoo ...

How to customize the checkbox color in Material UI?

I've been attempting to adjust the color of checkboxes and radio buttons. After conducting some research, I stumbled upon this helpful link: Material UI change Input's active color Unfortunately, I keep encountering the following error: (0 , _ ...

Failed Django POST request results in null response

I've been trying to find a solution for about a week now. I just need the data from a hidden label within a form, which should be easy, but instead of getting the data from the label, I keep getting 'NONE'. Template (form): {% for Dish in D ...

Navigating through different pages in PHP

How can I set up my php page to handle the following situations? When someone clicks on "my account", they should be directed to the login page if they are not currently logged in. If a user is already logged in and clicks on "my account," they should ...

When an anchor surrounds a div tag, white borders will appear

Lately, I've encountered an unusual issue. My buttons are created using div tags with rounded edges and border colors defined in the CSS. To link them to specific destinations, I encapsulated them within <a> tags. The problem arises when the li ...

Struggling with the loading of intricate attribute data into an array of arrays

I am struggling with loading different data attributes into an array of arrays. I have managed to load single data attributes into the dataArray, but when it comes to the data-size which contains groups of arrays in string format, I am facing difficulties ...

Adjusting the size of two cards with distinct content simultaneously using Bootstrap

Currently, I am in the process of developing an app using Bootstrap. The main objective of the code snippet below is to establish three rows within a container, with the initial row containing two columns each housing a card. In the first card (top left), ...

Animate a DIV's width to zero, including any padding

I am a beginner when it comes to jQuery and CSS, and I am attempting to animate two DIVs with the class .iDoElement using the following JQuery code: $( '.iDoElement' ).each(function () { var randomDelay = Math.floor(Math.random() * 600); ...