How to vertically center content using Bootstrap 4 and Laravel

Seeking to achieve vertical centering of my column content.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container d-flex h-100">
  <div class="row mt-5 ">
    <div class="col-sm-7 about-us">
      <div class="row h-100 justify-content-center align-items-center">
        <h3 class="display-3 strong ">
          {{ __('Message From Chief ') }}
        </h3>
        <p>
          {{ __('This is a sample text') }}
        </p>
      </div>
    </div>
    <div class="col-sm-4">
      <img src="{{asset('img/user.jpg') }}" class="img img-fluid" alt="">
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec9c839c9c899ec2869facddc2dddac2dc">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Encountering a significant gap between the heading and paragraph with the above code.

How can I properly align my text vertically center and identify any errors in my approach?

Utilizing Bootstrap 4 and Laravel for this project.

htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

To achieve full viewport height, simply include the min-vh-100 class in your .container and the align-content-center class in your row.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container d-flex min-vh-100">
  <div class="row">
    <div class="col-sm-7 about-us">
      <div class="row h-100 justify-content-center align-items-center align-content-center flex-column">
        <h3 class="display-3 strong ">Message From Chief</h3>
        <p>This is a sample text</p>
      </div>
    </div>
    <div class="col-sm-4">
      <img src="{{asset('img/user.jpg') }}" class="img img-fluid" alt="">
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4b4abb4b4a1b6eaaeb784f5eaf5f2eaf4">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer №2

To ensure a full-height container, simply include .h-100 in your .container class, add .h-100 to your row class, and include .my-auto in your col class.

<div class="container h-100">
  <div class="row h-100">
    <div class="col-sm-7 about-us my-auto">
      <div class="row h-100 justify-content-center align-items-center">
        <h3 class="display-3 strong ">
          {{ __('Message From Chief ') }}
        </h3>
        <p>
          {{ __('This is a sample text') }}
        </p>
      </div>
    </div>
    <div class="col-sm-4">
      <img src="{{asset('img/user.jpg') }}" class="img img-fluid" alt="">
    </div>
  </div>
</div>

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

Web Page Content Scrambling/Character Exchange

I've encountered a perplexing issue that seems to strike randomly, yet I've managed to replicate the problem on three different desktops. Oddly enough, some other desktops never experience this issue and I'm at a loss as to what could be cau ...

javascriptphphtmlgoogle-chrome

What is the best way to translate these CSS properties into Mui?

I am currently in the process of transitioning my CSS code to utilize MUI's sx prop and styled() function. However, I have not been able to find any documentation on how to properly convert the following code to MUI syntax. Can someone assist me with ...

htmlcssreactjsmaterial-ui

Having trouble advancing to the next page while attempting to web scrape

I'm currently working on scraping school data from a specific website. You can find the website here https://i.stack.imgur.com/iP37q.png. To start scraping, simply click on the "Cari Sekolah" button to navigate to the initial page. https://i.stack.i ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Troubleshooting a Custom Menu Control in HTML

Would you mind taking a look at the menu I have set up in this fiddle: http://jsfiddle.net/Gk_999/mtfhptwo/3 (function ($) { $.fn.menumaker = function (options) { var cssmenu = $(this), settings = $.extend({ title: "Menu", ...

javascripthtmlcssmenuhtml-lists

Function returning undefined when accessing prototype property in JavaScript

When attempting to create an image rotator using prototypal inheritance, I am encountering an error in the console showing: TypeError: this.curPhoto is undefined this.curPhoto.removeClass('previous'); I have placed this code in the callb ...

javascriptjquerycssprototypeprototypal-inheritance

Adding substantial sections of HTML without any adjustments

While I am working on DOM manipulation, I have encountered the need to insert large blocks of HTML. I am looking for a more efficient way to do this rather than relying on concatenation or creating a messy code structure. Consider the simple code snippet b ...

javascriptjqueryhtmlstring

Creating a Bootstrap 4 table that utilizes the full width while maintaining responsiveness

Is it feasible to implement a table-responsive solution that adjusts column width based on the length of data within each column, while still allowing the thead to occupy the entire canvas width? For Example: (the last column with no content should take u ...

csshtml-tablebootstrap-4

Style large and small text side by side with CSS styling

I've been trying to figure out how to position a smaller biography-style text next to this large title, but I'm having trouble finding a solution. I've experimented with float: left, float: right, and display: flex in my CSS code. Below is t ...

htmlcsstextalignment

Difficulty Aligning Header Elements - Combining Navigation and Logo on the Same Line

I am currently facing an issue with positioning a logo and navigation links within a <header> element. When I apply the CSS property text-align:center;, the logo aligns to the center on one line while the navigation links appear on another line direc ...

htmlcssresponsive-design

Images do not appear on Bootstrap Carousel as expected

I am facing an issue where the images are not displaying on my bootstrap carousel or when I try to display them individually using their class. I am utilizing bootstrap and express for my project. I have verified multiple times that the file path to the im ...

javascripthtmlexpresstwitter-bootstrap-3

substitute tags

Is there a way to change the tagName of a tag using jQuery? For example, if I have an HTML document and I want to replace all 'fieldset' with 'div'. Any suggestions would be appreciated! ...

jqueryhtmldomtagsreplace

The communication factor that triggers the expansion of the mother element

I've been struggling with this issue for quite some time. Here is the challenge at hand: I am in the process of developing a library to streamline AJAX calls and neatly display error messages directly within a form. The dilemma: Whenever the messag ...

htmlcss

Delving Into the Mysteries of Bootstrap Modal Fading

After updating our Bootstrap plugins file to version 2.2.1, I encountered an issue with adding the 'fade' class to modals. Previously, we had been using data-* api references for modals but decided to switch over. However, when I tried to incorpo ...

javascripttwitter-bootstrap

Ensuring the validity of float and non-empty values in JavaScript

Embarking on the journey of web development, I'm delving into basic applications. My current project involves creating a straightforward webpage to add two numbers and implementing preliminary validations - ensuring that the input fields are not left ...

javascripthtmlcsswebbootstrap-4

Tips for automatically resizing a canvas to fit the content within a scrollable container?

I have integrated PDF JS into my Vue3 project to overlay a <canvas id="draw_canvas"> on the rendered pdf document. This allows me to draw rectangles programmatically over the pdf, serving as markers for specific areas. The rendering proces ...

javascripthtmlcssvue.jscanvas

What is preventing me from utilizing global variables in distinct HTML and JavaScript files?

I am facing a perplexing issue with my HTML files, specifically index.html and lobby.html. Within main.js, which is loaded in index.html, I attempt to load lobby.html using window.location.href. Despite trying various methods to define global variables i ...

javascriptjqueryhtml

"Implement a feature that allows for infinite scrolling triggered by the height of

Looking for a unique solution to implement a load more or infinite scroll button that adjusts based on the height of a div. Imagine having a div with a height of 500px and content inside totaling 1000px. How can we display only the initial 500px of the div ...

javascriptcss

How can I disable the background color in Chrome autocomplete? Is there a way to make the background

There's a form on my website where the autocomplete feature shows a blue background color. The form itself has a semi-transparent white background. I managed to change the autofill color to white using this CSS property: -webkit-box-shadow: 0 ...

htmlcssgoogle-chromeautofill

Creating a centered div in HTML for WordPress

<div id="logo" style="center"><img src="logo1.png"></img></div><br><br><br><br><br><br><br></div> It seems like there is an issue with the styling of the div element. The syntax might ...

csshtml

Exploring the capabilities of AngularJS2's formGroup and formControlName functionality

Exploring the world of AngularJS2, I recently created a sign-up page utilizing formGroup formControlName, but encountered an issue with passing null values to the object. HTML code: <div class="col-md-8 col-md-offset-2"> <form [formGroup]="m ...

htmlnode.jstypescriptangular2-forms