Bootstrap’s font sizes are calculated off of the body font size by using rem values. If you change the body font size all styles will be increased/decreased automatically. Rem stands for “root em” because it calculates the size based on the size of the root of the document or body tag.
Tag / Class Default Font size body 16px; line-height: 1.5; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; p, li 1rem / 16px h1 2.5rem / 40px h1 small 80% / 32px h2 2rem / 32px h2 small 80% / 25.6px h3 1.75rem / 28px h3 small 80% / 22.4px h4 1.5rem / 24px h4 small 80% / 24px h5 1.25rem / 20px h5 small 80% / 16px h6 1rem / 16px h6 small 80% / 12.8px .display-1 6rem / 90px .display-2 5.5rem / 82.5px .display-3 4.5rem / 67.5px .display-4 3.5rem / 52.5px
Tagged : Bootstrap / bootstrap 4 / bootstrap default text size / default text sizez / Guide / h1 dtext size / h1 size in px bootstrap html / How / HTML / Perforce / Process / rem stands for / Tutorial / What
Easily change the vertical alignment of
inline, inline-block, inline-table, and table cell elements.
Change the alignment of elements with the
These are the classes:- .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.
helpers are useful for modifying the padding and margin of an element. Where property is one of:
m –sets margin p-sets padding Sides is one of:-
t-sets margin-padding “ top“ b-sets margin-padding “ bottom“ l-sets margin-padding “ left“ r-sets margin-padding “ right“ x-sets padding left|right or margin left|right y-sets padding top|bottom or margin top|bottom blank-sets margin padding on all sides of the element Size is one of:-
0-sets m|p to 0 1-sets m|p to .25rem 2-sets m|p to .5rem 3-sets m|p to 1rem 4-sets m|p to 1.5rem 5-sets m|p to 3rem auto-sets margin to auto Negative margin :-
n1-sets margin to -.25rem n2-sets margin to -.5rem n3-sets margin to -1rem n4-sets margin to -1.5rem n5-sets margin to -3rem
Tagged : Bootstrap / bootstrap 4 / bootstrap utilities spacing / Guide / How / HTML / Perforce / Process / scmgalaxy / scmGalaxy DevOps Training Online / scmGalaxy Tutorials / scmgalaxy tutorials bootstrap 4 utilities / spacing utilities in bootstrap / spacing utilities in bootstrap4 / Tutorial / What
Arrange the elements easily with the positioning utilities.
.fixed-top class is use to fix the element in the top position of the page. .fixed-bottom class is use to fix the element in the bottom position of the page. .sticky-top class is use to stick the element at the top of the page when you scroll past it.
Tagged : Bootstrap / bootstrap utilities / bootstrap utilities in position / fixed navbar into the top of page / Guide / Perforce / position utilities in bootstrap 4 / Process / sticky top use to fix navbar in top / Tutorial / What
Progress Bar in Bootstrap 4 is mainly used to indicate to the user, how much progress of the process is done. progress bars featuring support for stacked bars, animated backgrounds, and text labels. Use utility classes for the background (bg-success, bg- info, bg-light, bg-dark, bg-danger, bg-warning) for creating a progress bar with a different color.
Where to use Progress Bar:-
Progress Bar With Label by placing text within the .progress-bar. Progress Bar With Height. Colored Progress Bar by using .progress-bar-sucess|info|warning|danger. Striped Progress Bar by using .progress-bar-striped class. Animated Progress Bar by using .active class. Stacked Progress Bars by using <div class=”progress”>.
Tagged : Animated progress bar in bootstrap / Bootstrap / bootstrap4 / Guide / How / Perforce / progress b ar with height in bootstrap / progress bar in bootstrap4 / progress bar with label in bootstrap / scmGalaxy Tutorials / Striped progress bar / Tutorial
The navbar is one of the prominent features of Bootstrap sites. A navigation bar is a navigation header that is placed at the top of the page. the navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the
.navbar class. Format of nav bar:-
Vertical Navbar by using class=”navbar-nav”. Centered Navbar by using .justify-content-center class to center the navigation bar. Colored Navbar by using any of the .bg-color classes to change the background color of navbar. Brand/Logo by using .navbar-brand class is used to highlight the brand/logo/project name of your page. Collapsing The navbar To create a collapsible navigation bar, use a button with class=”navbar-toggler”, data-toggle=”collapse” and data-target=”#thetarget”. Navbar With Dropdown. Navbar Froms and Buttons Add a <form> element with class=”form-inline” to group inputs and buttons side-by-side. Nevbar Text use .navbar-text class to vertically align any elements inside the navbar that are not links. Fixed Navbar by using .fixed-top or .fixed-bottom class to make the navbar fixed. Sticky navbar use the .sticky-top class to make the navbar fixed/stay at the thop of the page.
Tagged : .navbar class in bootstrap / Bootstrap / bootstrap component navbar / bootstrap components / bootstrap4 / brand/logo in navbar / fixed navbar in top or bottom in bootstrap / Guide / How / navbar in bootstrap / navbar in bootstrap4 / Process / sticky-top in bootstrap / Tutorial
Bootstrap provides an easy way to align media objects (like images or videos) together with content. Media objects are often used to display blog comments, tweets, and so on.
Basic media Object :- class=media class to a container element and place media content inside a child container with class=media-body. Nested Media Object :- Media object can also be nested(media object inside media). Right-Aligned Media Image :- to right-aligned media image class=media-body. Top, Middle or Bottom Alignment :- Use the flex utilities, class=align-self-(start/center/end) classes to place the media object on the top, middle or at the bottom.
Tagged : basic media object in bootstrap / Bootstrap / bootstrap 4 / Guide / How / media object in bootstrap / nested media object in bootstrap / Process / top media or bottom alignment in bootstrap / Tutorial
List groups are a flexible and powerful component for displaying a series of content.
Tagged : badges in bootstrap / Bootstrap / bootstrap4 / custom content in bootstrap / flush in bootstrap / horizontal list group in bootstrap / How / list group in bootstrap / Process / remove borders in bootstrap / Tutorial / What / what is list group in bootstrap4
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Sizing classes to the .input-group itself and contains within will automatically resize for each element. Checkboxes and radios options within an input group’s addon instead of text. Multiple inputs are only available for input gropus with a single inpute. Multiple addons are supported and can be mixed with checkbox and radio input versions and many more others things as well. Button addons are supported and can be mixed with multiple buttons and input text. Buttons with dropdowns are needed within a single line inpute. Segmented buttons means button and then inside button a dropdown menu and text area there. Customer forms button area and an option area. Customer file input are most important for uploading a file or image etc.
Tagged : Bootstrap / bootstrap components / button addons / buttons and dropdown / checkboxes and radio option / customer file upload in bootstrap4 / customer forms make using bootstrap / Guide / input group in bootstrap / multiple inputs / multiples addons / Process / segmented buttons / sizing classes in input group / Tutorial