Doc: Adding HTML Editors Documents (#33343)

* Add new Content flex box

* add content FlexBox

* add content flexbox

* add content flexbox

* improve bootstrap doc

* improve the bootstrap doc

* improve the bootstrap doc

* Create fcc123

adding jumbotron documentation..

* adding document html editors

* fix: made Editors folder lowercase

* chore: delete unwanted file
This commit is contained in:
Amitkumar
2019-02-09 03:09:33 +05:30
committed by Randell Dawson
parent 8b47ed264b
commit ddc8839e67
3 changed files with 220 additions and 0 deletions

View File

@ -0,0 +1,53 @@
---
title: Jumbotron
---
## Jumbotron
`Jumbotron` is Lightweight, flexible component for showcasing hero unit style content.
`Jumbotron` is a responsive component which the main goal is to focus visitor's attention or highlight the special piece of information.
Jumbotron make use of almost any other bootstrap code to additionally increase its engagement value. It's operate with images,enlarged fonts,different backgorund styles etc.
### Most Attracting features of jumbotron
- * Showcase the marketing messages on your site
- * Project presentation
- * Article introduction
- * Image showcase
### How to use
Use a `<div>` element with class `.jumbotron` to create a jumbotron:
**Code Example:**
```
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
```
#### Fluid jumbotron
To make the jumbotron full width, and without rounded corners, add the `.jumbotron-fluid` modifier class and add a `.container` or `.container-fluid` within.
**Code Example:**
```
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
```
### More Information:
- [Bootstrap Jumbotron components Doc](https://getbootstrap.com/docs/4.0/components/jumbotron/)