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

Made changes to bootstrap buttons (#23460)

Browse Source
This commit is contained in:
Amaka Mbah
2018-12-05 00:28:05 +01:00
committed by Tom
parent c8a9c32c89
commit c97a834cc9
1 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
guide/english/bootstrap/buttons/index.md
View File

@ -19,9 +19,9 @@ You can also use bootstrap buttons with the `<a>` and `<input>` elements as show
`<input class="btn btn-primary" type="submit" value="Submit">`
#### Bootstrap Button Class List:
This is a list of the CSS classes that bootstrap provides for buttons.
This is a list of the CSS classes that bootstrap provides for buttons. They give the background color to the buttons.
`.btn` Bootstrap's basic button.
`.btn` This is bootstrap's basic button. It is a prerequisite if you want other bootstrap buttons to work properly.
`<button type="button" class="btn">Basic</button>`
@ -61,6 +61,14 @@ This is a list of the CSS classes that bootstrap provides for buttons.
`<button type="button" class="btn btn-dark">Dark</button>`
`.btn-dark` This is bootstrap's dark button.
<button type="button" class="btn btn-dark">Dark</button>
`.btn-secondary` This is bootstrap's secondary button.
<button type="button" class="btn btn-secondary">Secondary</button>
#### Bootstrap Button Sizes:
This is a list of the CSS classes for different size of the buttons.
@ -76,6 +84,10 @@ This is a list of the CSS classes for different size of the buttons.
`<button type="button" class="btn btn-sm">Small</button>`
`.btn-md` This is bootstrap's medium button.
<button type="button" class="btn btn-md">Medium</button>
`.btn-xs` This is bootstrap's extra small button.
`<button type="button" class="btn btn-xs">Extra Small</button>`
@ -89,6 +101,11 @@ This is used to show that the button is disabled by fading the button. This can
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
`.btn-block` This is bootstrap's block level button. They actually span the entire width of their parent element. For example, a form element with a width of 200px, that means the btn-block button would have a width of 200px.
<button type="button" class="btn btn-sm">Small</button>
#### Bootstrap Outlined Buttons:
It is possible to also have outlined buttons rather than fully colored in ones. This is achieved by placing the mid fix `outline` between the button class you want. A sample usage would be as follows: