I'm attempting to position two words on the left and right sides of a Bootstrap 4 card...
However, I am encountering an issue where: https://i.sstatic.net/jPgif.jpg
The text "Choro" is overflowing out of the card body...
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link href="custom.css" rel="stylesheet">
</head>
<body>
<div class="align-middle">
<div class="container">
<div class="card card-1">
<p class="card-text">
<dl class="dl-horizontal">
<dt class="col-md-10 col-md-push-"><h1>Choro</h1></dt>
<dd class="col-md-1"><h1>Boy</h1></dd>
</dl>
</p>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
and custom.css code is:
.align-middle {
margin-top: 25px;
margin-bottom: 25px;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.2s ease-in-out;
}
What am I doing wrong? even putting another container tag inside card doesn't work
EDIT
It now looks like this: https://i.sstatic.net/F298y.jpg Thank You @G.L.P