What is the best way to center my text vertically in a "col-sm-12" using Bootstrap 4?

I'm struggling to vertically center the text within the yellow space. I've attempted using "align-items-center" on the row and the "my-auto" class as suggested in the documentation, but it's not working. 

#heading-cont {
    background-color: #F7CE38;
    height: 10rem;
}

.white {
    color: white;
}

.title {
    font-family: 'Montserrat', Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 300;
}

.description {
    font-family: 'Pathway Gothic One', Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<section class="header">
  <div class="container-fluid" id="heading-cont">
    <div class="row">
      <div class="col-sm-12 my-auto">
        <h1 class="title white text-center">Digital</h1>
        <h4 class="description white text-center">This is the description.</h4>
      </div>
    </div>
  </div>
</section>

Check out the CodePen Demo

htmlcsstwitter-bootstrapflexboxtwitter-bootstrap-4

Answer №1

(Assuming you were referring to "vertically centering"; as there is only one column in your provided example, there is nothing for it to align with.)

In Bootstrap, the container-fluid has a minimum height of 10rem. To achieve vertical centering for your text, you must expand the row to match this height:

#heading-cont > .row {
    height: 100%;
}

Answer №2

In order to ensure that the text is centered, it's important to set the row height to 100%.

.row {
   height: 100%;
 }

Answer №3

To achieve a flexbox layout and vertically center the contents of #heading-cont, you can add a class (like .x) and apply the following CSS:

.x {
  display:flex;
  flex-direction: column;
  justify-content: center;
}

For a live example, check out this link: https://codepen.io/anon/pen/GMdazJ

Answer №4

Make sure to utilize the bootstrap 4 classes as intended: use class="d-flex flex-column justify-content-center" instead of adding height to the row separately. Avoid creating unnecessary CSS rules that duplicate existing utility classes.

/*containers*/

.container-fluid {
  padding: 0;
}

#heading-cont {
  background-color: #F7CE38;
  height: 10rem;
}

#subheading {
  height: 8rem
}

#heading-cont > .row {
 /* height: 10rem;*/
}

#subheading > .row {
    /*height: 100%;*/
}

/*type + color*/

h1 {
  font-size: 3rem !important;
}

h3 {
  font-size: 2rem !important;
}

.white {
  color: white;
}

.margin-b {
  margin-bottom: 2rem;
}


.title {
  font-family: 'Montserrat', Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 300;
}

.description {
  font-family: 'Pathway Gothic One', Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

/*social-prof*/

.box {
  background-color: #E0E0E0;
  height: 20rem;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<section class="header">
  <div class="container-fluid d-flex flex-column justify-content-center" id="heading-cont">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="title white text-center">Digital</h1>
        <h3 class="description white text-center">This is the description.</h3>
      </div>
    </div>
  </div>
</section>

<section class="social-prof">
  <div class="container-fluid d-flex flex-column justify-content-center" id="subheading">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="title text-center">Branding</h1>
      </div>
    </div>
  </div>
  <div class="container-fluid" id="bu">
    <div class="row">
      <div class="col-sm-12">
        <div class="box">
          <div class="layer">
            <h3 class="description white text-center margin-b">Small Business Services</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

https://codepen.io/anon/pen/oGyrPg

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

Personalizing the presentation of asp.net webforms code

Having recently entered the asp.net realm, I've been intrigued by the talk surrounding asp.net mvc and its superior ability to customize markup and css compared to webforms. Despite hearing that asp.net is easier to learn than asp.net mvc, I've o ...

asp.nethtmlcssasp.net-mvc

Addressing Image Issues in CSS Grid

I'm struggling to position two images in different sections of a grid layout without overlapping them. I've attempted referencing the images by both their class and id, but they continue to occupy the same grid space. Referencing the images by ...

htmlcss

Can you explain the significance of this HTML code?

While examining some source code, I came across the following: <div class="classname {height: 300px; width: 200px}"></div> I am aware that element styling can be done using the style="" attribute. Could you explain what this code snippet sig ...

javascripthtmlcss

Retrieving html element id through jquery for ajax retrieved content

Here is the scenario: I have a list of cities populated in an HTML select tag. When the city is changed, a list of sub-localities is fetched as HTML checkboxes. Now, when the status of the sub-locality checkboxes is changed, I need to extract the labels a ...

javascriptjqueryhtmlajax

I'm having trouble with one of my Bootstrap modals that just won't seem to work. I've tried troubleshooting

Currently, I am in the process of developing an application that can showcase multiple Bootstrap modals. At the moment, I have successfully implemented one modal for signing out, but unfortunately, the modal designed for displaying notifications is not fun ...

csstwitter-bootstrapbootstrap-4bootstrap-modal

What could be causing unexpected results when Rails 2 encodes apostrophes in HTML?

When using h to HTML encode text in Rails 2, I'm encountering issues with apostrophes. Specifically, my apostrophes are being displayed as &#39;, which is not the desired outcome. Has anyone experienced this issue before? My understanding was tha ...

htmlruby-on-railsrubyencodeapostrophe

Is it possible to customize the placement of the login or register success message?

I would like to display a message indicating whether the login/register process was successful or not above my form. I am using Boostrap 3 along with some PHP functions. The message appears above my navbar but vanishes after 3 seconds, which is a bit anno ...

phphtmlcsstwitter-bootstrap

Adjust the position of elements to prevent overlap

I'm facing a problem with elements overlapping on my website. The navbar is sticky, meaning it slides down the page when scrolling. Additionally, I have a "to-top" button that automatically takes you to the header when clicked. I want the "to-top" but ...

javascriptjqueryhtmlcss

The subdirectory containing the Rails assets is causing loading issues in the production environment

My event CSS is currently located in app/assets/stylesheets/pages/events.scss. Surprisingly, everything looks perfect in development mode with all the assets loading properly. However, the real issue arises when I switch to production as it seems like thes ...

cssruby-on-railsproduction-environment

Object C UIWebView adapting to HTML

How can I get a responsive HTML page to display correctly in a UIWebView in Xcode? The page adjusts properly in other iPhone browsers, but not in the UIWebView. I would prefer not to use PhoneGap for this. Any suggestions for making the HTML responsive i ...

iphonehtmlobjective-ciosuiwebview

Ways to incorporate bold, unbold, and italic styles into a single heading text within the same line using Bootstrap 4

Is there a way to format a single line of text with certain words bolded and the rest regular? I have a specific example pictured here: Picture of my Issue Specifically, I'm looking to bold "Honors:" and "Capstone:", while keeping the surrounding tex ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Utilizing Next.js - Implementation of a unique useThemeMode hook to efficiently manage theme preferences stored in the browser's localStorage, seamlessly integrating with toggleTheme

For a while now, I've been trying to figure out how to toggle my favicon based on the theme logic of my application and the current theme state stored in localStorage. My approach involves using CSS variables and data attributes applied to the html bo ...

javascriptcssreact-hooksnext.jsstyled-components

What is the process for sending a request and obtaining a response from a REST API using JavaScript?

I have a private server set up on my computer with a built-in REST API. The base URL for the API is: . I am now looking to develop a client application for this server using the API. To authenticate on the server, the API endpoint is baseurl/login with the ...

javascripthtmljsonrestapi

Having issues with $_POST not retrieving values from .post

Below is the javascript snippet that I have written: function submitForm() { var name = document.getElementsByName('name').value ,email = document.getElementsByName('email').value ,subject = document.getElementsBy ...

javascriptphpjqueryhtmlpost

Using setTimeout with drag and drop functionality in HTML

I need a setTimeout function to be triggered only after dragging and dropping an image into a division, not before the drop occurs. ...

javascriptphphtmlweb

Taming col-auto in Bootstrap to prevent it from being overly insatiable

In this simplistic example below, I have implemented two columns using the col-auto class, allowing each column to take up the necessary space. .row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; o ...

cssbootstrap-5bootstrap-grid

Having trouble with the contact form? It seems to be experiencing issues with

Hey there! I'm encountering an issue with the following codes, where I'm getting redirected and receiving an error message stating "Undefined variable: subject in C:\wamp\www\boot\send.php on line 42." Any help would be greatl ...

phphtmlcss

Are you attempting to retrieve the most up-to-date trading price of a stock with Python?

After attempting to extract the LTP of a stock with the code below, I am not getting any value in return. Can you identify the error in the following code: from selenium import webdriver from bs4 import BeautifulSoup driver=webdriver.Chrome("C:&bsol ...

pythonhtmlseleniumbeautifulsoupstock

Adjust the vertical alignment of an HTML element

I've been trying to make an image move using the variable counter, but for some reason, it's not working. If I set document.getElementById("movee").style.top directly to a number, it works fine. Combining it with the counter variable should theor ...

javascripthtml

Eliminate unnecessary spaces in the input field located below the provided text

In the html code, I have an input field that looks like this: https://i.sstatic.net/DsD4y.png This is the CSS for the input fields: .form-control-1 { display: block; margin: 0 auto; width: 30%; height: 50px; padding: 6px 12px; font-size: 18p ...

htmlcss