Position the container in the center of the Jumbotron using Bootstrap 4

As I delve into front-end web development, my current learning focus is on mastering Bootstrap. An element of my project includes a jumbotron with a blurred image background under the navigation bar. While I have successfully blurred the image without affecting the text, I am struggling to center the h1 and p vertically within the jumbotron.

View the jumbotron image here: https://i.sstatic.net/9E9Ud.png

.jumbotron-fluid {
text-shadow: #444 0 1px 1px;
color: #FFF;
position: relative;
height: 40vh;
}

.jumbotron-fluid .container-fluid {
position: relative;
z-index: 2;
}

.jumbotron-fluid .bg {
background: url("../code.png") top center no-repeat;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
overflow: hidden;
position: absolute;
filter: blur(5px);
top: 0;
left: 0;
z-index: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="bg"></div>
<div class="jumbotron jumbotron-fluid">
<div class="bg"></div>
<div class="container-fluid text-center">
<h1 class="display-4">Welcome!</h1>
<p class="lead">This site contains various projects I have worked on</p>
</div>
</div>

htmltwitter-bootstrapcssbootstrap-4

Answer №1

Resolved the issue by including the flex and center parameters within the display and align-items properties.

.jumbotron-fluid {
    text-shadow: #444 0 1px 1px;
    color: #FFF;
    position: relative;
    height: 40vh;

    display: flex;
    align-items: center;
}

Credit to @RoboBear for highlighting this question

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

When submitting a blank form, radio buttons and check boxes are not included in the query string or post body

Here is the form that I am working with: <form method="post" action="getParameterValuesServlet"> <table border="1"> <tr> <td>User Name</td> <td><input type="text" name="userName"&g ...

htmlformsservletsform-submitfiddler

What is the reason behind Object.hasOwn(x,y) being different from Reflect.ownKeys(x).includes(y) when x represents a CSSStyleDeclaration object and y is a hyphenated property such as 'z-index'?

Both of these conditions are true: 'z-index' in getComputedStyle(document.body) // true Reflect.has(getComputedStyle(document.body), 'z-index') // true Additionally, the following statements also evaluate to true, indicating that &apo ...

javascriptcss

Padding needed for floated <li> items in horizontal menu

I'm attempting to design a horizontal top header featuring a main navigation stacked above a sub-navigation. Both navigations are constructed using <ul> elements with floated <li> items. The sub-navigation mysteriously has excess horizonta ...

css

The $watch() function seems to be failing to properly refresh the $scope

Within my controller, I have a function $scope.remove() that triggers a request to the usercart, which then calls an API. The JSON response from the API includes an object with an array of cart items. Despite using an ng-repeat in the HTML to iterate thro ...

javascripthtmlangularjsangularjs-service

Calculating the average of numbers using a loop in PHP

The table currently includes a loop that generates 8 calculated values in one row spanning across 8 columns. Check out the screenshot below: https://i.sstatic.net/rnK3R.png Everything looks good, except for the last column cell labeled corrected accuracy ...

phphtmlformsmathhtml-table

The webpack bundle is causing issues with the HTML's ability to detect my JavaScript function

In my HTML drawer, there is a function that automatically clicks on the first tab when the page loads. However, when I bundle the JS using webpack, I encounter a Uncaught ReferenceError: openTab is not defined error, preventing my openTab function from wor ...

javascripthtmlwebpack

The ultimate HTML5 code that stands above the rest

As newcomers to mobile technology, we now have our HTML5 page operational with PHP. Our next step is to transition to mobile. Whether it's through a native app or mobile web, the specific platform doesn't matter in our current situation. What we ...

html

Is there a method to give a webpage a subtle shimmering effect without utilizing CSS box-shadow?

Struggling to Develop a High-Performance Interface Feature I'm currently facing a challenge in coding an interface that requires a subtle and broad glow effect, similar to the example provided below: https://i.sstatic.net/E4ilD.jpg Exploration of ...

javascripthtmlcssdomcanvas

Close the modal when the submit button is clicked and the Ajax request is successful

I have encountered a similar issue to others on StackOverflow, but I am struggling to implement the suggested solutions in my specific case. Currently, I have a modal in my view: <div id="createFolderModal" class="modal"> <div class="modal-dialo ...

jqueryajaxtwitter-bootstrapmodal-dialogbootstrap-modal

Toggle the visibility of an HTML element and dynamically change the text of a button

As a beginner in Javascript, I am experimenting with changing button text upon the show/hide of a fieldSet. However, I am encountering some issues with the button text not updating correctly. $(window).on("load", function() { $('.indoor').sl ...

javascriptjqueryhtml

Tips on creating a post that can be viewed exclusively by one or two specific countries

I'm stumped on how to create a post that is visible only to specific countries. How can I code it to determine the user's country without requiring them to make an account? Any advice or hints would be greatly appreciated. ...

javascriptphphtml

What is the best way to construct the following layout with columns in Bootstrap?

My approach involved dividing the content into two equal columns using col-md-6. Each of these was further split into 3 columns using col-md-4. However, I faced an issue regarding achieving consistent spacing between columns on the right side. https://i.s ...

htmlcssbootstrap-4

Align button text vertically in the middle using Flexbox with Bootstrap 4

Why is the text in the button displaying at the top instead of the center when using internet explorer? button { height: 100px; } <div class="container"> <button class="w-100 f-default-f btn btn-primary d-flex justify-content-between px-3"& ...

csstwitter-bootstrapflexboxbootstrap-4microsoft-edge

What is the best way to navigate back to the top of the page once a link has been clicked?

One issue I'm facing is that whenever I click on a link in NextJS, it directs me to the middle of the page: <Link href={`/products/${id}`} key={id}> <a> {/* other components */} </a> </Link> I believe the problem l ...

javascriptcssreactjsnext.js

The container in Bootstrap's CSS now appears when the navigation bar is present

Experiencing a minor issue here. I am attempting to create a layout with a navigation positioned in the top right corner, and the main content contained within a separate container below it. The problem I am facing is that the content container seems to b ...

htmlcsstwitter-bootstrap

When inline-block elements wrap onto a new line, they expand to full width

Upon my realization, an inline-block element will expand to 100% width if there are more child elements than can fit on one line: <div style="background-color:red;padding:5px"> <div style="display:inline-block;background-color:green;padding:5 ...

htmlcss

Utilizing inline JavaScript to automatically refresh a webpage at specified intervals and monitor for updates within a specific div element

I am currently working on creating an inline script that will automatically refresh a webpage at regular intervals and check for changes in a specific element. If the element meets certain criteria, then the script should proceed to click on a designated b ...

javascripthtmlreloadintervals

Failure in Bootstrap Typography #1 - Unable to locate proper class attribute values for uppercase and reverse transformations

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel= ...

htmlcssbootstrap-4uppercaseblockquote

Having trouble with adding a listener or making @click work in VueJS?

Apologies for my limited experience with Vue. I am currently facing an issue where one of my click functions is not working as expected for multiple elements. The click event is properly triggered for the #app-icon element. However, the function is not be ...

javascripthtmlvue.js

Screen readers are unable to "read" text that is identified through aria-describedby

When enhancing my web application for accessibility, I encountered a challenge. I have implemented two required fields in a form that should display separate error messages as spans. To accomplish this, I am utilizing aria-invalid to signal when the fields ...

javascripthtmlaccessibility