From fc4a95bfc6705c458986ff1bb90696f95d2aaec8 Mon Sep 17 00:00:00 2001
From: trbst <trbojevics@outlook.com>
Date: Sat, 10 Nov 2018 06:01:57 +0100
Subject: [PATCH] Fixed markdown and examples (#34245)

* Fixed markdown and examples

* Fixed markdown in starting section and 'Header and Footer' section
* Fixed example code structure in starting section and 'Header and Footer' section

* Add correct syntax
---
 guide/english/bootstrap/cards/index.md | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

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 -->
+```