Aligning Content in the Middle of a Bootstrap Column

Question

Aligning Content in the Middle of a Bootstrap Column

Can anyone help me with centering the content of a bootstrap column vertically? I'm facing an issue when setting width: 100% and height: 100% for the overlay div. Any solutions?

Here is an example image of what I am trying to achieve:

https://i.sstatic.net/X3oJV.png

Below is the code snippet in question:

var coverSection = $(".cover-table");
$(coverSection).height($(window).height());

.cover-table {
    display: table;
    width: 100%;
    text-align: center;
    background-image: url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg");
    background-size: cover;
    background-attachment: fixed;
    color: white;
    
    .cover-cell {
        display: table-cell;
        vertical-align: middle;
        
        .overlay {
            width: 100%;
            height: 100%;
            background-color: rgba(22, 22, 22, 0.80);
        }
    }
}

Note: Please run the code snippet in full page.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

To achieve a responsive layout, you can utilize the flex property in CSS. Simply update the following code within your cover-table:

.cover-table {
   display: flex;
   align-items: center;
   justify-content: center;
}

Below is a functional example:

var coverSection = $(".cover-table");
    $(coverSection).height($(window).height());

.cover-table{
    display:flex;
    align-items:center;
  justify-content:center;
    width:100%;
    text-align:center;
    background-image:url("https://example.com/image.jpg");
    background-size:cover;
    background-attachment:fixed;
    color:white;
    .cover-cell{
        display:table-cell;
        vertical-align:middle;
        .overlay{
            width:100%;
            height:100%;
            background-color:rgba(22, 22, 22, 0.80);
        }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<section class="cover-table">
    <div class="cover-cell">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="cover-nested">
                            <h4>Hello Universe</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 2

To achieve a responsive layout, you can utilize the flex property in CSS. Simply update the following code within your cover-table:

.cover-table {
   display: flex;
   align-items: center;
   justify-content: center;
}

Below is a functional example:

var coverSection = $(".cover-table");
    $(coverSection).height($(window).height());

.cover-table{
    display:flex;
    align-items:center;
  justify-content:center;
    width:100%;
    text-align:center;
    background-image:url("https://example.com/image.jpg");
    background-size:cover;
    background-attachment:fixed;
    color:white;
    .cover-cell{
        display:table-cell;
        vertical-align:middle;
        .overlay{
            width:100%;
            height:100%;
            background-color:rgba(22, 22, 22, 0.80);
        }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<section class="cover-table">
    <div class="cover-cell">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="cover-nested">
                            <h4>Hello Universe</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 3

Answer №2

If you utilize display:table for the container with the class .cover-table, you can then apply display:table-row to elements with the class .cover-cell and use display:table-cell along with vertical-align:middle for elements with the class .overlay.

var coverSection = $(".cover-table");
    $(coverSection).height($(window).height());

.cover-table{
    display:table;
    width:100%;
    text-align:center;
    background-image:url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg");
    background-size:cover;
    background-attachment:fixed;
    color:white;
}
.cover-cell{
  display:table-row;
}
.overlay{
  width:100%;
  height:100%;
  background-color:rgba(22, 22, 22, 0.80);
  display:table-cell;
  vertical-align:middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="cover-table">
    <div class="cover-cell">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="cover-nested">
                            <h4>Hello World</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 4

If you utilize display:table for the container with the class .cover-table, you can then apply display:table-row to elements with the class .cover-cell and use display:table-cell along with vertical-align:middle for elements with the class .overlay.

var coverSection = $(".cover-table");
    $(coverSection).height($(window).height());

.cover-table{
    display:table;
    width:100%;
    text-align:center;
    background-image:url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg");
    background-size:cover;
    background-attachment:fixed;
    color:white;
}
.cover-cell{
  display:table-row;
}
.overlay{
  width:100%;
  height:100%;
  background-color:rgba(22, 22, 22, 0.80);
  display:table-cell;
  vertical-align:middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="cover-table">
    <div class="cover-cell">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="cover-nested">
                            <h4>Hello World</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 5

Answer №3

The secret code:

.overlay {
  height: 100vh;
  width: 100vw;
  position: relative;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}

.overlay .container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Note: The following JS code is not needed due to CSS implementation
//var coverSection = $(".cover-table");
//    $(coverSection).height($(window).height());

.cover-table {
  display: table;
  height: 100vh;
  /* Achieves same effect as the removed JS code */
  width: 100%;
  text-align: center;
  background-image: url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg");
  background-size: cover;
  background-attachment: fixed;
  color: white;
  .cover-cell {
    display: table-cell;
    vertical-align: middle;
    .overlay {
      width: 100%;
      height: 100%;
      background-color: rgba(22, 22, 22, 0.80);
    }
  }
}
.overlay {
  height: 100vh;
  width: 100vw;
  position: relative;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}


.overlay  .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="cover-table">
  <div class="cover-cell">
    <div class="overlay">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="cover-nested">
              <h4>Hello World</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 6

The secret code:

.overlay {
  height: 100vh;
  width: 100vw;
  position: relative;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}

.overlay .container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Note: The following JS code is not needed due to CSS implementation
//var coverSection = $(".cover-table");
//    $(coverSection).height($(window).height());

.cover-table {
  display: table;
  height: 100vh;
  /* Achieves same effect as the removed JS code */
  width: 100%;
  text-align: center;
  background-image: url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg");
  background-size: cover;
  background-attachment: fixed;
  color: white;
  .cover-cell {
    display: table-cell;
    vertical-align: middle;
    .overlay {
      width: 100%;
      height: 100%;
      background-color: rgba(22, 22, 22, 0.80);
    }
  }
}
.overlay {
  height: 100vh;
  width: 100vw;
  position: relative;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}


.overlay  .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="cover-table">
  <div class="cover-cell">
    <div class="overlay">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="cover-nested">
              <h4>Hello World</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 7

Answer №4

All you need to do is include this CSS code and your text will be perfectly centered.

Here's the CSS:

.centered-text {
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 8

All you need to do is include this CSS code and your text will be perfectly centered.

Here's the CSS:

.centered-text {
    display: flex;
    align-items: center;
    justify-content: center;
}

Aligning Content in the Middle of a Bootstrap Column

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to navigate to the next or previous image in a lightbox by using ev.target.nextElementSibling or ev.target.prevElementSibling?

Is it possible to configure Lambda NodeJS 12.x flags (like --experimental-modules) when using AWS SAM local start-api?

Is it possible for my Java Applets to be compatible with Chrome 45?

Is there a Unicode character substitution happening?

Creating a dynamic dropdown menu: a step-by-step guide

"Encountering a HTTP 500 Error while using jQuery Ajax with a Web

"Steps to retrieve the button's ID when using the onClick event in Reactjs

Should private members be kept confidential during program execution?

Accordion jQuery failing to display tabs

Error: Attempting to assign a value to the non-existent property 'user' <br> at [file path] on sqlite3

Preserve file sequence with jquery file upload

Guide on automatically filling input text fields with database values when a checkbox is clicked

Is Flex still wrapping elements even when set to nowrap?

Troubles with submitting jQuery validation plugin via AJAX

Unexpected strings added to files using jQuery Upload File Plugin, caused by WebKitFormBoundary

What could be causing my Vue component to not refresh?

Uploading Files and Content using AJAX

Having trouble getting two divs to align on the same line using the 'inline' method

Save user information to initialize rootScope upon refreshing the page

How can I make this div appear on the screen?