Bootstrap and HTML: how to get first row content centered as full width and second row centered using a 50/50 split

Question

I'd like to be able to get a layout using Bootstrap that looks as follows:

My code is:

Unfortunately, I'm getting something that looks like this (notice that "foo" in row 1 is aligned with "bar" in row 2):

How do I achieve the desired result?

Thanks!

useryQ151 · Answer

According to your code to make it center, you can align the text center and that's all.

ths · Answer

It seems you want to only center the text on the .col-12 from the first .row which you can easily achieve by simply adding the text-center class to that .col-12 element.
Note: the class text-center is a Bootstrap class.

/** just to visually show the changes */

.col-6,
.col-12 {
  border: 1px solid red
}

.col-12 {
  margin-bottom: 20px;
}



  
    foo
  
  
    bar
    baz

In case you have an img not a text on the .col-12 element, you might simply add the d-inline-block and your image should be centered thanks to text-ce,ter class that we already applied.

/** just to visually show the changes */

.col-6,
.col-12 {
  border: 1px solid red;
}

.col-12 {
  margin-bottom: 20px;
}

Note: the use of d-inline-block is not really required but i used it to ensure cross-browser behavior because each browser might treat the images in a different way. Most of the browsers already set the display property of an image to inline-block.

The class img-fluid is a Bootstrap class that allows to maintain a responsive image. Learn more about Bootstrap Responsive Images on Bootstrap Docs (BS v4.0).

Learn more about the display property on MDN.

Idris Muzzammil Ayobami · Answer



    foo


    bar
    baz

Bootstrap and HTML: how to get first row content centered as full width and second row centered using a 50/50 split

3 Answers