Bootstrap 4 Flashcards

Question

``` UL .pagination LI .page-item A .page-link .pagination-lg .pagination-sm .active .disabled ```

Answer 1

Used to create a pagination navigation menu. You create it using a UL tag with .pagination for the container. You create the list using LI with .page-item class. Then inside that you create the anchors using .page-link class. .active highlights the current navigation page.

Answer 2

Creates a bread crumb navigation styled list of page structure you've visited. Photo / Summer / Italy

Answer 3

Creates a "list group" which is a list of items, that when hovered highlights the background color and font color automatically based on contextual list group class.

Answer 4

A bordered box with padding around the contents, includes options for headers, footers, contents, colors etc Think of it like a license card for content

Answer 5

Creates a bootstrap 4 card, cards are created using DIV elements. .card-title removes the bottom margins for P elements if it's the last child. It adds a blue color to any link with hover affects. Add the .card-img.top/bottom outside the .card-body to span the entire width.

Answer 6

Allows elements to be created in front of the cards background image set with card-img-top or card-img-bottom.

Answer 7

Creates a column of cards. You can place all your cards inside the .card-columns wrapper div to create a group of cards.

Answer 8

Creates a group of cards with equal height and widths, these automatically adjust as you insert more cards. These cards have spaces in between them, not to be confused with a card-group which each card hugs the other without spacing.

Answer 9

Creates a group of equally tall and wide cards that fit snugly against the others.

Answer 10

Creates a basic dropdown menu from buttons that expand when clicked. Allows 1 selection.

Answer 11

Used to create a dividing line between drop down menu items.

Answer 12

Used to create a header section for the drop down menu selections

Answer 13

Allows the drop down to align to the right hand side.

Answer 14

Creates a dropup menu that pops up instead of down

Answer 15

Used for creating plain text dropdown items. Can be used with (A) or (span) to be a link or plain text.

Answer 16

Creates a collapsible div that is activated with a button press. .button data-toggle="collapse" data-target="#demo".Collapsable.button .div id="demo" class="collapse".words. .show will show the content by default

Answer 17

A group of collapsible divs with content inside each that will open/close like a collapsible toggle item.

Answer 18

Used to create accordians, used in a child DIV to reference the parent container of all collapsible DIVs. ``` DIV id="accordian" DIV data-parent="#accordian" DIV content DIV data-parent="#accordian" DIV content ```

Answer 19

Creates a basic horizontal nav menu

Answer 20

Aligns the navigation menu to the center, or right. Default is to the left.

Answer 21

Creates a vertical navigation menu

Answer 22

Makes the normal navigation links into a tab appearance. That folder like appearance you're looking for

Answer 23

Creates that classic rounded square pill style of the navigation menu.

Answer 24

Tab style, where each tab (think of folder appearance) shows the contents of that tab when clicked.

Answer 25

Used to create a basic navigation bar in bootstrap. .navbar-expand-* is used to tell the browser what size the navigation menu will collapse or go vertical when shrunk.

Answer 26

Used to center navbar content to the center of the element. .navbar-brand is used to give styling to the logo name via text placed in between the anchor tags. .navbar-brand can accept images, will automatically scale the image to fit vertically.

Answer 27

Used to make the text in the dropdown menus white or black, "light" means dark text, "dark" means light text.

Answer 28

Creates a collapsible navbar menu which collapses on the size setting you set in the first NAV. In bootstrap the collapsible menus are called togglers

Answer 29

If you remove .navbar-expand-md you will only have the navbar toggle icon which is a toggle dropdown.

Answer 30

Used to create a drop down navbar

Answer 31

to create a form inside a bootstrap navigation bar menu to have a handy search functionality.

Answer 32

Adds icons to your search menu making it look better

Answer 33

Aligns non link items (text) inside the navbar

Answer 34

Used to fix a navigation bar at the top or bottom of the page

Answer 35

Used to create grouped form sections that group the labels and input elements together neatly.

Answer 36

Used to create an inline form. .form-check-label and input created a remember me check box.

Answer 37

or it won't be styled properly in bootstrap

Answer 38

Used to create a check box form in bootstrap

Answer 39

Changes the form size of the input elements. Plaintext and placeholder are used to create inputs with text inside that disappear when you click to enter info

Answer 40

1. ) Create container div 2. ) Create carousel indicators (ul with lis ) 3. ) Create the slideshow portion (divs with images) 4. ) Create left and right controls, which are anchors with special classes

Answer 41

Used to create the main container of a carousel

Answer 42

Used to create the indicator section data-target tells the carousel which targets to use, usually the same name for each data-slide-to tells the carousel what order to use the slides, usually 0 1 2 etc

Answer 43

Used to create the actual slide show, 2 nested divs, with an img inside

Answer 44

Used to create the controls to the carousel

Answer 45

Used to create captions for each image slide

Answer 46

Use a button or link to launch the modal, link it to a div wrapper with the ID

Answer 47

Creates a button from which you can launch a modal.

Answer 48

Creates the main wrapper using 3 DIV elements, inside these you will add the modal header body and footer.

Answer 49

Used to create the skeleton of the modal content. Inside each you can add whatever content you want.

Answer 50

Used to change the default size of the modal window that pops up

Answer 51

Used to create a tool tip that pops to the top, right, bottom or left

Answer 52

The jquery function must be called in the document. $('[data-toggle="tooltip"]').tooltip();

Answer 53

A jquery function must be called for popovers $('[data-toggle="popover"]').popover();

Answer 54

Creates a pop over affect when hovering over an anchor or element.

Answer 55

A scrollable webpage with elements that are linked to a menu. When you scroll to a corresponding section, its menu item will be highlighted to let you know you're in that section. It also lets you jump using the menus.

Answer 56

Used to quickly create no borders, or border styling just on one side of an element

Answer 57

Used to create border colors around an element.

Answer 58

Changes an elements border radius via classes

Answer 59

Used to create a section which uses floated content

Answer 60

Used to auto center elements and content, basically a short version of margin auto

Answer 61

Creates elements with widths of certain common percentages, which correlate to the numbers after the dash ``` w = width mw = max width ```

Answer 62

Creates elements with heights which have a percentage of its parents height.

Answer 63

By using the m p method coupled with a key letter to set which direction the padding or margins will be applied Example mt-1 Will apply a level 1 amount of margin, to the top of an element

Answer 64

Examples tp-5 class will adjust the top padding of an element 3 rem in distance .m-*-5 = 3 rem on all sides

Answer 65

Creates a shadow for an element, default is medium using only .shadow

Answer 66

Creates a responsive embedded element, dependent on its parents size Create a parent element with .embed-responsive. Then create a child with .embed-responsive-item inside

Answer 67

Changes the visibility of an element. This doesn't set display: none.

Answer 68

Places an element fixed at the top or bottom

Answer 69

When you scroll past an item, it will stick to the top only when you scroll past it. Will not work in IE11 and earlier

Answer 70

Used for styling closing elements such as modals and alerts. It floats right by default.

Answer 71

Creates a parent div that makes all children 'flex" items. Which are basically items that can be arranged and sized based on percentages.

Answer 72

Creates a parent DIV for flex items. d-flex shows the background of the flex box spanning the whole space available. .d-inline-flex only wraps the children elements not showing the background color of the flex box by default.

Answer 73

Creates a row where you can stack items next to each other on the left or right depending on whether its reversed or not.

Answer 74

Stacks items vertically and takes all available space.

Answer 75

Creates justified content. Each type will justify your content in a different way. ``` Start is left aligned no space end is right aligned no space center is center aligned no space between is as far apart as possible with gaps around is equally gapped items ```

Answer 76

Makes an element take up the remaining space in a d-flex group

Answer 77

Sets priority to which element will be styled first, second third etc in a flex group. This class is used on child elements of the .d-flex parent

Answer 78

Used to automatically push items to the right. This is assigned to the child of the .d-flex parent. mr-auto pushes to the right ml-auto pushes to the left

Answer 79

Aligns items vertically ``` start = top end = bottom center = center base = ??? stretch = items height are 100% ```

Answer 80

Used to align individual flex items instead of whole rows. These are used on children of the parent .d-flex

Answer 81

By adding flex classes to flexed elements

Answer 82

.d-sm-flex An example will only flex for small content

Answer 83

using the .media class parent with a .media-body child inside

Answer 84

.media defines the parent wrapper and .media-body defines the content that will be styled together with the media

Bootstrap 4 Flashcards

(108 cards)