diff --git a/guide/english/bootstrap/cards/index.md b/guide/english/bootstrap/cards/index.md
index 25adcde8fb..9977b077ad 100644
--- a/guide/english/bootstrap/cards/index.md
+++ b/guide/english/bootstrap/cards/index.md
@@ -8,29 +8,35 @@ title: Cards
 
 *  Cards are bordered boxes with a bit of padding around the content inside them, which can be used to conveniently display a specific set of information.
 
-##### To create a basic Bootstrap 4 card, you need to create a ```<div>``` container with the class ```.card``` and inside  another ```<div>``` container with the class of ```.card-body```
+** To create a basic Bootstrap 4 card, you need to create a `<div>` container with the class `.card` and inside  another `<div>` container with the class of `.card-body` **
 
-###### This is how it will look in an html doc
+###### Code example:
 
 ```html
 <div class="card">
-<!-- content of the card goes here -->
   <div class="card-body">Content</div>
+  <!-- content of the card goes here -->
 </div>
 ```
+
 ### Header and Footer
 --------
 
-The structure of the card can be enhanced by the addition of a header and a footer. To add one of these elements, you have to create a ```<div>``` container with the ```.card-header``` or ```.card-footer``` class.
+The structure of the card can be enhanced by the addition of a header and a footer. To add one of these elements, you have to create a `<div>` container with the `.card-header` or `.card-footer` class.
 
-###### This is how it will look in an html doc
+###### Code example:
 
 ```html
 <div class="card">
-<!-- content of the card goes here -->
-  <div class="card-header">Header content</div>
-  <div class="card-body">Body content</div>
-  <div class="card-footer">Footer content</div>
+  <div class="card-header">
+      <!-- Header content -->
+  </div>
+  <div class="card-body">
+      <!-- Body content -->
+  </div>
+  <div class="card-footer">
+      <!-- Footer content -->
+  </div>
 </div>
 ```
 
@@ -78,6 +84,7 @@ The structure of the card can be enhanced by the addition of a header and a foot
 ```
 ### Card is balanced with the image
 
+```html
 <div class="card" style="width: 18rem;">
   <img class="card-img-top" src="..." alt="Card image cap">
   <div class="card-body">
@@ -85,3 +92,4 @@ The structure of the card can be enhanced by the addition of a header and a foot
   </div>
 </div>
 <!--You must set the image height on all cards -->
+```