How to vertically center align h1 using Bootstrap

<body>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
        <div class="container">
            <div class="navbar-brand mx-auto"><h2 style="color: white;">Name</h2></div>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#burger"><span class="navbar-toggler-icon"></span></button>

            <div class="collapse navbar-collapse" id="burger">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a href="#python" class="nav-link px-3"><h2 style="color: white;">Python</h2></a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link px-3"><h2 style="color: white;">Name</h2></a>
                    </li>
                    <li class="nav-item">
                        <a href="#html&css" class="nav-link px-3"><h2 style="color: white;">Html&Css</h2></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!--Secion One-->
    <section class="bg-dark text-light p-5 p-lg-0 text-center text-md-start">
        <div class="container">
            <div class="row align-items-center text-center">
                <h1 class="hi">Design made by the <span style="color: #F23DFF;">youth</span></h1>
            </div>
        </div>
    </section>
</body>

A preview image can be viewed here Link to Image

Answer №1

Utilize flexbox:

<body class="h-100 d-flex flex-column">
  <nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
    <div class="container">
      <div class="navbar-brand mx-auto">
        <h2 style="color: white">Name</h2>
      </div>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#burger">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="burger">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item">
            <a href="#python" class="nav-link px-3">
              <h2 style="color: white">Python</h2>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link px-3">
              <h2 style="color: white">Name</h2>
            </a>
          </li>
          <li class="nav-item">
            <a href="#html&css" class="nav-link px-3">
              <h2 style="color: white">Html&Css</h2>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!--Section One-->
  <section
    class="
      d-flex
      align-items-center
      flex-1
      justify-items-center
      bg-dark
      text-light
      p-5 p-lg-0
      text-center text-md-start
    ">
    <div class="container">
      <div class="row align-items-center text-center">
        <h1 class="hi">
          Design created by the <span style="color: #f23dff">youth</span>
        </h1>
      </div>
    </div>
  </section>
</body>

Additionally, ensure the wrapping html takes full height with the following CSS:

html{
  height:100%
}
.flex-1{
  flex: 1;
}

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

Form-select failing to transmit data

There seems to be an issue with one specific HTML field not sending data. This is my HTML code: <form id="login_registro_form" role="form" method="post" action="./controllers/register.php"> <div cl ...

How can I create a redirect link in HTML that opens in a new window

I have a HTML page where I need to redirect to the next page. <a href="www.facebook.com" target="_blank">www.facebbok.com</a> Currently, it is redirecting to localhost:9000/dashboard/www.facebook.com But I only want to redirect to www.facebo ...

The origin of the recipient window does not match the target origin provided when using postMessage on localhost

Currently, I am in the process of developing an application that utilizes single sign-on (SSO) for user authentication. Here is a breakdown of the workflow: Begin by launching the application on localhost:3000 (using a React Single Web Application). A po ...

Click on the child element while it is already being clicked by manually implementing the 'declick' function in Javascript

Hey there, I'm looking for suggestions on a better title for this issue. I couldn't come up with the right wording myself. Problem I currently have a Google Maps element with pointer events set to none, preventing it from being scrolled when ho ...

What could be the reason for the sudden malfunction of the .tabs li:hover property on my

I'm having trouble with the :hover effect not working on my .tabs li element. I've tried commenting out my jQuery script, but it still won't apply. Can anyone help me figure out why? Here's a JSFiddle link for reference: https://jsfidd ...

Tips for displaying and hiding content in Angular2

I have a component that toggles the visibility of elements by clicking a button. This is the snippet of my HTML code: <div *ngFor="let history of histories | sortdate: '-dateModified'"> <p><b>{{ history.remarks }}</b& ...

Preserve the div's aspect ratio using CSS styling

Is there a way to design a flexible div element that adjusts its width and height in sync with the window's size changes? Do any CSS techniques exist that would allow the height of the div to adapt based on the width, while still preserving its aspec ...

Add a CSS class to a dropdown menu option in HTML and JavaScript (JQuery) if it has a specified ID

I am brand new to HTML and JQuery, and I'm struggling with setting a class for my select element when the currently selected option has an ID of "answer". This is crucial for checking the correctness of a multiple choice question. If achieving this i ...

Unable to close Bootstrap 5 modal

All of my modal forms are functioning properly, except for one that I migrated from Bootstrap 4 to Bootstrap 5. This particular modal refuses to close. Neither the Close button (the X at the top of the popup) nor the Cancel button will close the modal. I ...

Tips for navigating a user to a different HTML page using JSP code?

In my html page Login.html, I have set up a simple login form with username and password fields, along with a submit button. When the user clicks on the submit button, it triggers a JSP page named Login.jsp to validate the entered credentials against an ...

Is there a way to display menu items in a list when hovering over the parent element using CSS?

Is it possible to make the code below run when hovering over (#cssmenu ul > li > ul > li ) with the mouse? #cssmenu ul > li > ul > li > ul { right: 1170px; } ...

Scrolling up or down in an HTML webpage using a script

Seeking a code snippet for my website that will allow me to achieve the following functionality: Upon clicking on text_head1, a list of lines should scroll down. Subsequently, when I click on text_head2, the previous list should scroll up while the new l ...

Using a local variable within quotes in Angular 4 (HTML) and utilizing ngFor

In my current project, I am utilizing Angular2-Collapsible. The objective is to display the details upon clicking a table row. Below is the code snippet provided. Specifically, if I add [detail]= "detail1", the collapsible-table-row-detail will appear when ...

Troubleshooting problem with Bootstrap media object in CSS

I am attempting to utilize Bootstrap to showcase media content (linked here: https://getbootstrap.com/docs/4.0/layout/media-object/). However, despite copying and pasting the code from the documentation, the output does not match the example on the website ...

Tips for keeping an image at a fixed size within a grid, even when the browser window is resized

As a newcomer to front end coding, I am currently working on a practice website to familiarize myself with the code. One issue I am facing is related to using a bootstrap grid with an image in the left column. I want to prevent the image size and position ...

Updating the color of text when clicking on a link using javascript

I am facing an issue where I cannot seem to change the text color using JavaScript. The functionality to show and hide div tags is working perfectly, but changing the color seems to be a challenge. It's worth noting that there are no styles defined fo ...

Ways to trigger Bootstrap modal through a PHP GET call

I have been searching for a solution to create a modal similar to this one, but I haven't found anything yet. My requirement is that when we pass true in a GET request, the modal should be displayed. Otherwise, if there is no value specified in the $ ...

How to Handle Tab Navigation on a Mobile Website without Javascript?

My website primarily targets mobile devices, with tabs in the top navigation. Currently, these tabs are hard coded instead of utilizing Javascript. We want to ensure our site is accessible on all mobile devices, including those without Javascript support. ...

Utilizing HTML and CSS for Optimal Page Layouts

<div id="pageHeading"> <h1>zisland</h1> <img src="islandpic.jpg" alt="Mountain View" style="width:50px;height:50px"> </div> #pageHeading{ color: #000000; width: auto; height: auto; text-align: center; ...

Learn how to implement interconnected dropdown menus on an html webpage using a combination of JavaScript, AngularJs, and JSON dataset

Incorrect HTML code example: <div ng-app="myApp" ng=controller="myCtrl"> States : <select id="source" name="source"> <option>{{state.name}}</option> </select> Districts: <select id="status" name="status"> ...