How to fix a fully-vertically aligned div in Bootstrap 4 that refuses to center

I am in the process of creating my online portfolio using Bootstrap 4. One issue I'm facing is aligning a div vertically. Additionally, I am trying to include a .png image that overlaps the vertically centered div, but the image ends up pushing the entire div down. Can anyone provide guidance on how to resolve this problem?

Here is the desired outcome: https://i.sstatic.net/qISQy.png

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Berk's Online Portfolio</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-black static-top">
  <div class="container">
    <a class="navbar-brand" href="#">
          <img src="https://via.placeholder.com/150x75">
        </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">HOME
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">SKILLS</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">PORTFOLIO</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="min-vh-100">
  <div class="row">
    <div class="col-md-12" style="background-color: #F9DB0F;">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <h1 class="display-1">HI</h1>
            <h1 class="display-1">I'M BERK</h1>
            <h5>A FULL STACK DEVELOPER AND UI/UX DESIGNER</h5>
          </div>
          <div class="col-md-6">
            <img src="https://entourageapp.s3-us-west-2.amazonaws.com/uploads/images/160/large/manWalkingFrontSuit.png?1440865661" width="75%">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

htmlcssbootstrap-4positionvertical-alignment

Answer №1

Here is some useful code:

In your style.css file:


.bg {
  background-color: #F9DB0F;
  margin: 250px 0;
}

.div-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 0;
  
}

.my-pic {
  position: absolute;
  top: -200px
}

In your index.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Your Online Portfolio</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <!-- Make sure to load your style.css file after the Bootstrap files -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-black static-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="https://via.placeholder.com/150x75">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">HOME
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ABOUT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">SKILLS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">PORTFOLIO</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">CONTACT</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="min-vh-100">
        <div class="row">
            <div class="bg col-md-12">
                <div class="container">
                    <div class="row">
                        <div class="center col-md-6">
                            <h1 class="display-1">HI</h1>
                            <h1 class="display-1">I'M YOUR NAME</h1>
                            <h5>A PROFESSIONAL</h5>
                        </div>
                        <div class="col-md-6">
                            <img class="my-pic"
                                src="YOUR IMAGE URL HERE"
                                width="WIDTH VALUE HERE">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

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

The slides on SlickJS are initially loaded in a vertical alignment, but once the arrows are interacted with,

I've put together a demonstration that highlights the issue I'm facing. Upon visiting the contact section, you'll notice that all the slickJS slides are stacked vertically initially, but once you interact with them by clicking on the arrow o ...

javascripthtmlcssbootstrap-4slick.js

Transfer information from session to vue-component

Within my routes file, I obtain the current user from the session and then render the profile HTML: app.get('/profile', isLoggedIn, function(req, res) { res.render('profile.html', { user : req.user // extract user ...

htmlnode.jsexpressvue.js

Struggling to resolve a basic issue with the header on a straightforward HTML webpage

Task is as simple as it gets, yet I can't seem to grasp it. I put together a basic HTML Snippet. Check out my Code Pen In the pen, there are 3 nested divs, with div1 serving as the main div for my React Application. The background color of the body i ...

htmlcss

How can we assign priority to the child element for detection by the "mouseover" event in jQuery?

Can you help me figure out how to make the "mouseover" event prioritize detecting the child element over its parent? This is the jQuery code I've been using: <script> $(function() { $("li").mouseover(function(event){ $('#log&a ...

javascriptjqueryhtmldom

Python HTML parser with advanced CSS capabilities

Currently, I am in need of an HTML parser that is aware of CSS and functions similar to how a browser renders HTML. Specifically, I am searching for the equivalent of element.innerText in DOM-JS. For instance, let's consider the following HTML: < ...

pythonhtmlhtml-parsingscreen-scraping

List the acceptable favicon formats for Internet Explorer version 10 and above

When I say type, I'm referring to the file extension. My favicon displays correctly in Firefox, Chrome, and Safari, but someone suggested that the issue may be related to the favicon type. Is there a reliable online resource where I can find informa ...

htmlinternet-explorerfavicon

Is there a way to showcase my information on flash cards using JavaScript?

Currently, I am developing a full stack application that utilizes JavaScript on both the front and back end. This application allows users to create their own flashcards set. Upon clicking "View Cards," the data is fetched and the question-answer pair is d ...

javascripthtmlcssnode.jsasynchronous

A collection of items displayed in an unordered format across two columns

I need help creating a list that displays in two columns. One column for odd numbers, the other for even numbers. Here's an example of what I'm trying to achieve: +----------------------------------------------------+ | col- ...

htmlcsstwitter-bootstrapcol

Click here to navigate to the anchor and expand the accordion

Is there a way to open an accordion panel using an external anchor link? I attempted to use an anchor link, but it only loads the page without opening the panel. My goal is to have the page load, scroll to the panel, and then open the accordion when the ...

javascriptjqueryhtmlaccordion

SVG utilizes a distinct color for every individual path

I have an SVG file containing two different paths. <path d="M 84.4 53.2 C 75.3 50.1 67.1 48.5 59.6 48.3 C 51.2 48 45.2 47.5 41.5 46.5 C 35.7 45.1 29.9 42.4 23.9 38.4 C 21.6 36.9 19.4 35.2 17.3 33.2 C 19.4 34.2 21.6 35 23.9 35.6 C 27.3 36.5 34.1 37 44 ...

csssvgpath

Device identification verification similar to that of Google and Facebook

Is there a way to uniquely identify a user's device during authentication so that a second factor of authentication (like SMS) can be required if the user is logging in from an unfamiliar device? Both Google and Facebook have this feature, and it does ...

htmliosfacebooksecurityweb

Combining Sass and SCSS in webpack: A step-by-step guide

Just curious about something. I have some libraries I'm interested in using (for example, font-awesome) that use scss, but I personally prefer working with sass. How can I set up my project with webpack to accommodate this? Here's my current s ...

cssreactjswebpacksasswebpack-style-loader

Ways to display multiple PHP pages in a single division

Within my project, I have a unique setup involving three distinct PHP pages. The first file contains two divisions - one for hyperlinked URLs and the other for displaying the output of the clicked URL. Here is an excerpt from the code snippet: <script& ...

javascriptphpjqueryhtmlajax

The HTMLEditor from ASP.NET AJAX Control Toolkit is not appearing correctly on the page

My experience with the ASP.NET AJAX Control Toolkit HTMLEditor has been less than satisfactory. The toolbar layout is not being displayed correctly, with what should be a 3-line toolbar appearing stretched out to 9 lines. ...

asp.nethtmlcssasp.net-ajax

Removing the transparent section of an image: A step-by-step guide

I am struggling to figure out how to remove the background boxes in this image that I want to add to my website. click here for image Although it appears transparent, there are still gray and white boxes visible in the background. How can I get rid of th ...

htmlcsstransparency

Incorporating a Bootstrap table within another table and adjusting the table height

I am facing a minor issue on my website. I am utilizing bootstrap 4 and within the table box, I have nested another table as shown in the image below. How can I adjust the height of the inner table to match the height of the box (td)? https://i.sstatic.ne ...

htmlcsshtml-tabletwitter-bootstrap-4

Understanding the mappings in a source map: Decoding the source map keys

Consider the following scenario with a stylesheet: .d1 width: 10px .d2 width: 20px When viewed using the nested output style, it leads to this css code: .d1 { width: 10px; } .d1 .d2 { width: 20px; } The source map (v3) indicates ...

csssasssource-maps

What is the widely used term for the container that allows for panning by dragging with a mouse?

I am looking to design a container that extends beyond the width of the page, allowing users to pan by dragging through empty space between controls without zooming in or out. What is this type of container control typically referred to as? I am intereste ...

htmlvue.jsuser-interfacecontrols

What is the best way to manage two buttons within a single form?

<input type="submit" value="" id="button1"/> <input type="submit" value="" id="button2" /> In a single form, I have two buttons. Only one button appears at a time on the client side thanks to jQuery magic. The issue is that when using the &ap ...

jqueryhtmlformsbutton

Dropdown Box Linking and Input Field Integration in HTML

I have a scenario where students need to pay monthly fees for their classes. My objective is as follows: 1. Dropdown #1: Student Names 2. Dropdown #2: Month Names 3. Textbox: Fees amount for the selected month The code I am using: $(document).ready(fu ...

javascriptjqueryhtmlcss