CODEWITHSUNDEEP
htmlcssbootstrap-4
Martin
Martin

Reputation: 1628

Bootstrap4 - Center text in col and match width / height of other col in row

EDIT: I have a jsfiddle now [https://jsfiddle.net/martinradio/jshet597/8/] (make sure to resize the html part more to the left so that the two blocks appear side-by-side)

Hello I have Box1 and Box2 side-by-side, Box1 will always have less text in it than Box2, so I'm trying to make it so Box1 will center its text and stretch the box's width/height to match the space availaible due to Box2 (right)

enter image description here

<div class="container-fluid">
  <div class="row">
    <!-- Box1 (left) -->
    <div class="col-md-4">
      <div class="card mb-4 box-shadow" style=height:100%>
        <div class="card-body ">
        <div class="row ">
            Box1 text 
        </div> <!-- / .row -->
        
        </div>
      </div>
    </div> <!-- /col -->
    
    <!-- Box2 (right) -->
    <div class="col-md-8">
      <div class="card mb-4 box-shadow" style=height:100%>
        <div class="card-body">
        <div class="row align-items-center mb-4">
          <div class="col">
            Box 2 text ...
          </div>
        </div>
        </div>
        </div>
        </div>

I want Box1 text to be centered, while the box's width and height still matches that of Box2. In the above image the width and height is responsive and perfect, but the text isnt centered.

If I add ' my-auto' to box1's col definition like so:

 <!-- Box1 (left) -->
    <div class="col-md-4 my-auto">

It gets there partially, the text is now centered (Nice!) but the box doens't fill out the empty space to match Box2

enter image description here

Is there a way to style my boxes such that Box1's text will be centered, as well as filling out the empty space to match that of Box2?

Thanks

Upvotes: 1

Views: 624

Answers (2)

Habib
Habib

Reputation: 29

<html>
  <head>
    <title>Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container h-100">
      <div class="row h-100 justify-content-center align-items-center">
        <div class="col-lg-6" >
          <p>Box one</p>
        </div>
        <div class="col-lg-6">
          <p>Box 2</p>
          <p>Box 2</p>
          <p>Box 2</p>
          <p>Box 2</p>
          <p>Box 2</p>
          <p>Box 2</p>
          <p>Box 2</p>
          <p>Box 2</p>
        </div>
      </div>
    </div>
  </body>
</html>

You can try this to align your items center Use these classes on container h-100 on row h-100 align-items-center justify-content-center these classes will align your items into center

Upvotes: 1

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

Use the classes h-100 align-items-center justify-content-center on the parent .row of Box1 Text:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <!-- Box1 (left) -->
    <div class="col-md-4">
      <div class="card mb-4 box-shadow" style=height:100%>
        <div class="card-body ">
          <div class="row h-100 align-items-center justify-content-center">
            Box1 text
          </div>
          <!-- / .row -->

        </div>
      </div>
    </div>
    <!-- /col -->

    <!-- Box2 (right) -->
    <div class="col-md-8">
      <div class="card mb-4 box-shadow" style=height:100%>
        <div class="card-body">
          <div class="row align-items-center mb-4">
            <div class="col">
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
            </div>
          </div>
        </div>
      </div>
    </div>

Upvotes: 1

Related Questions