PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Saturday, November 19, 2022

[FIXED] Why can't I vertically align my items using bootstrap?

 November 19, 2022     bootstrap-4, bootstrap-5, css, html, twitter-bootstrap     No comments   

Issue

I am working on a windsurf website right now. The problem I have here is, although I've added the justify-content-center, align-items-center, and text-center classes, the h1 and h2 are still on the top. They aligned horizontally but not vertically. Please help. My website looks like this right now: mywebsite HTML:

<!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.0">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <!-- My Css -->
    <link rel="stylesheet" href="styles.css">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Noto+Serif+Gujarati:wght@200;300;400&family=Poppins:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/1e90402f09.js" crossorigin="anonymous"></script>
    <!-- Logo -->
    <link rel="shortcut icon" href="images/logo.ico" type="image/x-icon">
    <title>Bojark Windsurf</title>
</head>

<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Bojark Windsurf</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="#">Ana Sayfa</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Paketlerimiz</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Hakkımızda</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Top Part -->
    <section id="top">
        <div class="container-fluid p-5 text-center addbg">
            <div class="row justify-content-center align-items-center">
                <div class="col-12">
                    <h1>Bojark Windsurf</h1>
                </div>
                <div class="row justify-content-center align-items-center">
                    <div class="col-12">
                        <h2>Bambaşka Bir Deneyime Hazır Mısın?</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="test">
        <h1>Test</h1>
        <p>calismiycak</p>
    </section>
    <!-- Bootstrap JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
        crossorigin="anonymous"></script>
</body>

</html>

CSS:

body {
    background-color: #B1B2FF;
    font-family: 'Poppins', sans-serif;
}

.navbar-brand,
.nav-link {
    color: white;
}


.addbg {
    background-image: url("images/24.jpg");
    height: 660px;
    background-size: cover;
}

#top h2 {
    font-family: 'Noto Serif Gujarati', serif;
    letter-spacing: 0.8px;
    color: white;
}

/* font-family: 'Noto Serif Gujarati', serif;
font-family: 'Poppins', sans-serif; */

Solution

Just add d-flex and align-items-center to that element.

 <section id="top">
        <div class="container-fluid d-flex align-items-center p-5 text-center addbg">
           ..........................................
        </div>
</section>


Answered By - Lukas
Answer Checked By - Terry (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing