gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed markdown and examples (#34245)

Browse Source 
* 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
This commit is contained in:
trbst
2018-11-10 06:01:57 +01:00
committed by Aman Mittal
parent 5f03e0f036
commit fc4a95bfc6
1 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
guide/english/bootstrap/cards/index.md
View File

@ -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. * 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 ```html
<div class="card"> <div class="card">
<!-- content of the card goes here -->
<div class="card-body">Content</div> <div class="card-body">Content</div>
<!-- content of the card goes here -->
</div> </div>
``` ```
### Header and Footer ### 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 ```html
<div class="card"> <div class="card">
<!-- content of the card goes here --> <div class="card-header">
<div class="card-header">Header content</div> <!-- Header content -->
<div class="card-body">Body content</div> </div>
<div class="card-footer">Footer content</div> <div class="card-body">
<!-- Body content -->
</div>
<div class="card-footer">
<!-- Footer content -->
</div>
</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 ### Card is balanced with the image
```html
<div class="card" style="width: 18rem;"> <div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap"> <img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body"> <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>
</div> </div>
<!--You must set the image height on all cards --> <!--You must set the image height on all cards -->
```