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

Update index.md (#31193)

Browse Source 
Made syntax highlighting more consistent
This commit is contained in:
igodsmark
2019-03-11 18:31:52 +00:00
committed by The Coding Aviator
parent 49ecb31306
commit 12ee6b7be8
1 changed files with 3 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,17 +4,10 @@ title: Cards
# Bootstrap 4 Cards
------
* Using Bootstrap 4 you can create 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.
* Using cards, you will be able to create beautiful, responsive elements such as blog posts, gallery items, shop products and much more. Cards are a key feature for a content-rich website and provide an easy solution for both design and responsiveness.
** To create a basic Bootstrap 4 card, you need to create a `<div>` container with the class `.card` and inside it another `<div>` container with the class of `.card-body` **
###### Code example:
```html
@ -68,9 +61,9 @@ This is some text within a card body.
* There are two classes for this purpose: card-img-top, which places an image on the top of the card, and card-img-bottom, which places the image on the bottom, both of them fitting them to the rounded border of the card neatly.
* These classes have to be used with the ```<img>``` tag inside a card to work properly.
* These classes have to be used with the `<img>` tag inside a card to work properly.
* Keep in mind, that if you want an image to span the entire width, you would add the image container outside of the ```<div>``` container with the card-body class.
* Keep in mind, that if you want an image to span the entire width, you would add the image container outside of the `<div>` container with the card-body class.
###### This is how it will look in an html doc
@ -92,7 +85,7 @@ This is some text within a card body.
### Cards Overlay
----
* For making an image into the background of the card and displaying the text on top of it you need to use the class card-img-overlay on the content, which you want to display over the image, instead of using the card-body class.
* For making an image into the background of the card and displaying the text on top of it you need to use the class `.card-img-overlay` on the content, which you want to display over the image, instead of using the `.card-body` class.
###### This is how it will look in an html doc