There are pre-made classes for styling text. Here is a partial list:
<h1 class="display-1"> <h1 class="display-4"> <p class="lead"> <p class="text-muted">
We do not need any CSS because these classes are already part of the Bootstrap framework.
There is an easy way to align text and images in a column: the text-center class.
<div class="col text-center">This text will be centered</div>
Other values are text-left and text-right
You will probably want your image to expand to the size of the column it is in (to be responsive). Add an img-fluid class to the image.
<div class="col-6"> <img src="images/whatever.jpg" class="img-fluid" /> </div>
Try resizing your browser to see if the image changes.
If you added an img-fluid class and your image is not taking up the entire width of a column, it may mean that your image is not big enough. Try adding width="100%" to the image.
<div class="col-6"> <img src="images/whatever.jpg" class="img-fluid" width="100%" /> </div>