4.4 Text and Image Basics


Basic Text Classes

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.

Video Headline


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

Video Headline

Responsive Images

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">

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%">