How Archives - Page 3 of 15

Bootstrap:-Component “Progress”

by vikashdev kSeptember 2, 2021September 2, 2021BootstrapLeave a Comment

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”>.

progress bar example Download

Bootstrap Component:- “Pagination”

by vikashdev kSeptember 1, 2021September 1, 2021BootstrapLeave a Comment

Pagination is a component in bootstrap that is used to enable navigation between pages in a website. It is a method of dividing web content into discrete pages, thus presenting content in a limited and digestible manner.

Pagination uses:-

Working with icons by using class=sr-only (previous/next) utility.
Disabled and active states by using class=disable/active to indicate the current page.
Sizing by using .pagination-lg|sm for additional sizes.
Alignment by .justify-content-center|end.
Breadcrumbs by using .breadcrumb and .breadcrumb-item classes.

pagination example Download

Tagged : active and disable state in pagination / alignment in pagination / breadcrumb use in pagination / Guide / How / pagination in bootstrap / pagination in bootstrap4 / pagination use / Process / scmgalaxy tutorial pagination / scmGalaxy Tutorials / sizing in pagination / Tutorial / What

Bootstrap:-Component “Navigation bar”

by vikashdev kAugust 31, 2021August 31, 2021BootstrapLeave a Comment

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.

navbar with all examples Download

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:-Component “model”

by vikashdev kAugust 31, 2021August 31, 2021BootstrapLeave a Comment

A modal window creates a mode that disables the main window but keeps it visible, with the modal window as a child window in front of it. … Users must interact with the modal window before they can return to the parent application. This avoids interrupting the workflow on the main window.

Simply define the Modal component as a dialog box/popup window that is displayed on top of the current page.

.fade class for add animation.
Model Size like model-sm, model-lg, model-xl.
Centered Model .model-dialog-centered class.
Scrolling Model use by adding .model-dialog-scrollable to .model-dialog in class.

model in the center Download

Tagged : bootstrap all components / centered model in bootstrap / fade class used in bootstrap / Guide / How / model in bootstrap / model in bootstrap4 / model size in bootstrap / Process / scmgalaxy / scmgalaxy bootstrap / scrolling mode in bootstrap / Tutorial

Bootstrap:-Components “Media Object”

by vikashdev kAugust 30, 2021August 30, 2021BootstrapLeave a Comment

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.

media_object Download

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

Bootstrap:-Component “List group”

by vikashdev kAugust 30, 2021August 30, 2021BootstrapLeave a Comment

List groups are a flexible and powerful component for displaying a series of content.

features:-

Basic items simply making for list.
Active items used for showing it’s an active mode.
Disabled items used for just reading that message.
Links and buttons are used to create actionable list group items with hover.
Flush / Remove Borders are used to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (card).
Horizontal to change the layout of list group items from vertical to horizontal across all breakpoints.
Contextual classes to style list items with a stateful backgrond and color.
With badges to show unread counts, activity .
Custom content by the help of flexbox utilities.
JavaScript behavior to create tabbable panes of local content.
Using data attributes use for activate a list group navigation without writing any javaScript by simply specifying data-toggle=”list” or on an element.

Creating_cool_list_group_with_some links/message etc.Download

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

Bootstrap:-Component “jumbotron”

by vikashdev kAugust 28, 2021August 28, 2021BootstrapLeave a Comment

A jumbotron indicates a big box for calling extra attention to some special content or information. A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it. Tip: Inside a jumbotron, you can put nearly any valid HTML, including other Bootstrap elements/classes. class jumbotron and class jumbotron-fluid are used.

jumbotron &jumbotron-fluid example Download

Tagged : bootstraap / Guide / How / jumbotron example in bootstrap / jumbotron fluid example in bootstrap / jumbotron in bootstrap / Process / scmgalaxy jumbotron in bootstrap

Bootstrap:-Component “Forms”

by vikashdev kAugust 27, 2021August 27, 2021BootstrapLeave a Comment

Bootstrap provides two types of form layout:-

Stacked form
Inline form

Stacked form(full-width):-

Inline form:-

Tagged : Bootstrap / bootstrap4 / Guide / How / inline form in bootstrap / Process / Stacked in bootstrap / Tutorial / types of form in bootstrap / What

How do I redirect to another page when clicking a button in Laravel.

by vikashdev kAugust 26, 2021August 26, 2021LaravelLeave a Comment

Step by Step:-

My next page name is “next”. which we are going to link the page through the button.

Step1:- Where you are creating the button, put the link in it.

Step2:- Then go to web.php(inside routes) and put some commands.

Step3:- Then go to home controller.php and write after the index function

Tagged : easy way to link new page inside button in laravel / Guide / How / how do i redirect to another page when clicking a button in laravel / link new page in laravel through a button / Process / step by step link new page through a button in laravel / Tutorial

Bootstrap:-Component “Collapse”

by vikashdev kAugust 26, 2021August 26, 2021BootstrapLeave a Comment

The collapse JavaScript plugin is used to show and hide content.

Usage

The collapse plugin utilizes a few classes to handle the heavy lifting:-

.collapse hides the content.
.collapse.show shows the content.
.collapsing is added when the transition starts, and removed when it finishes.

Tagged : Bootstrap / bootstrap4 / collapse in bootstrap / collapse in link in bootstrap / Guide / How / Process / Tutorial / What