Bootstrap – Pricing Demo ”; Previous Next What is a pricing? A pricing page is a web page that displays different pricing plans or packages for a product or service. The pricing page is design using cards, which are versatile and flexible components in Bootstrap. Below is an example of a pricing page: Example Description Download link Pricing This example shows a pricing page built with cards and featuring a custom header and footer. Download Print Page Previous Next Advertisements ”;
Category: bootstrap
Bootstrap – Display
Bootstrap – Display ”; Previous Next This chapter discusses about the display property of the Bootstrap. In Bootstrap, the display property is used to control the visibility and behavior of elements. It allows you to define how an element should be rendered and positioned within the document layout. Notation Utility classes that are applicable to all breakpoints, ranging from xs to xxl, do not have any abbreviation for breakpoints. These classes are implemented from a min-width: 0; and beyond and not restricted by media query. The remaining breakpoints do contain an abbreviation for the breakpoint. Following format is used in naming the display classes: .d-{value} for xs, such as .d-none. .d-{breakpoint}-{value} for sm, md, lg, xl and xxl, such as .d-lg-none sets display: none; on lg, xl, and xxl screens. {value} can be one of the following: none inline inline-block block grid inline-grid table table-cell table-row flex inline-flex Some of the values display property take, are as follows: .d-none: This value hides the element completely, making it invisible and not taking up any space in the layout. .d-inline: This value makes the element behave like an inline element, allowing other elements to be displayed alongside it on the same line. .d-block: This value makes the element behave like a block-level element, causing it to start on a new line and take up the full available width. .d-inline-block: This value combines the characteristics of both inline and block elements. The element is displayed inline, allowing other elements to be displayed alongside it. Let us see an example of .d-inline: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Display</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <div class=”container m-3 p-5″> <div class=”d-inline m-2 p-4 text-bg-success”>d-inline – success</div> <div class=”d-inline p-4 text-bg-warning”>d-inline – warning</div> </div> </body> </html> Let us see an example of .d-block: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Display</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <div class=”container mt-3″> <h4>Display – block</h4> <span class=”d-block p-4 text-bg-info”>d-block used for info</span> <span class=”d-block p-4 text-bg-primary”>d-block used for primary</span> </div> </body> </html> Hide elements In order to hide elements, use the .d-none class or one of the .d-{sm, md, lg, xl, xxl} classes. Screen size Class Hidden on all .d-none Hidden only on xs .d-none and .d-sm-block Hidden only on sm .d-sm-none and .d-md-block Hidden only on md .d-md-none and .d-lg-block Hidden only on lg .d-lg-none and .d-xl-block Hidden only on xl .d-xl-none and .d-xxl-block Hidden only on xxl .d-xxl-none Visible on all .d-block Visible on xs .d-block and .d-sm-none Visible on sm .d-none .d-sm-block .d-md-none Visible on md .d-none .d-md-block .d-lg-none Visible on lg .d-none .d-lg-block .d-xl-none Visible on xl .d-none .d-xl-block .d-xxl-none Visible on xxl .d-none .d-xxl-block Let us see an example of hiding the display on screens smaller than lg: Note: Kindly resize the screen in order to see the changed effect. Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Display</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <div class=”container mt-3″> <h4>Hide – display</h4> <!–Hide display on smaller than lg–> <div class=”d-lg-none bg-warning”>Hide on lg (large) and wider screens</div> <div class=”d-none d-lg-block bg-info”>Visible on screens smaller than xl (extra-large)</div> </div> </body> </html> Display in print You can modify the display value of elements specifically for printing purposes using our print display utility classes. These classes offer support for the same display values as the responsive .d-* utilities. Following are the list of utilities available for display in print: .d-print-none .d-print-inline .d-print-inline-block .d-print-block .d-print-grid .d-print-inline-grid .d-print-table .d-print-table-row .d-print-table-cell .d-print-flex .d-print-inline-flex display and print classes can be combined and used. Let us see an example: Note: Kindly resize the screen in order to see the changed effect. Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Display</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <div class=”container m-3 p-3″> <h4>Print – display</h4> <!–display on print and hide on screen–> <div class=”d-none d-print-block bg-primary-subtle p-3″>Hide on screen and display on print only</div> <!–display on screen and hide on print–> <div class=”d-print-none bg-warning p-3″>Hide on print and display on screen only</div> <!–display upto large screen and show always on print–> <div class=”d-none d-lg-block d-print-inline bg-danger-subtle p-3″>Always display on print and hide up to large screen</div> </div> </body> </html> Print Page Previous Next Advertisements ”;
Bootstrap – Breadcrumbs Demo
Bootstrap – Breadcrumbs Demo ”; Previous Next What is a breadcrumbs? Breadcrumb is a navigation component used to display the hierarchical path of the current page within the website”s structure. Bootstrap provides built-in CSS classes that can be used to create a breadcrumbs navigation component. .breadcrumb – This class is used to style and structure the breadcrumb component. .breadcrumb-item – This class constructs the breadcrumb trail. Each breadcrumb item represents a step in the navigation hierarchy. Some of the examples of the breadcrumbs are as follows. Example Description Download link Basic breadcrumbs This example shows a basic breadcrumb navigation bar with clickable links. Download Breadcrumbs with chevron This example demonstrates a breadcrumb-chevron. A chevron is a V-shaped symbol (>) commonly used as an indicator to show direction. Download Breadcrumbs with links and icons This example shows a breadcrumb navigation with links and Bootstrap icons. Download Custom breadcrumbs This example shows a custom breadcrumbs using CSS styles. Download Print Page Previous Next Advertisements ”;
Bootstrap – Badges Demo
Bootstrap – Badges demo ”; Previous Next What is a badge? A badge is a small inline element used to highlight or label certain information. It is typically displayed as a small circle or rectangle containing a number or text. They visually highlight important information or provide quick status updates within your web application. The Bootstrap classes that is used to add a badge in <html> element is .badge. Other classes that can be used to cutomize the badges are: color utility classes such as .bg-*, .text-bg-* positioning classes such as .position-absolute pill badges through .rounded-pill utility class Some of the examples for badges are as follows: Example Description Download link Badges basic This example shows the structure of badges and various other classes that can be applied to them in Bootstrap Download Print Page Previous Next Advertisements ”;
Bootstrap – Featured Demo
Bootstrap – Features Demo ”; Previous Next Overview Bootstrap features can be used to enhance the user experience by providing easily recognizable icons for various functions or elements. Icons can add meaning to different actions or elements, improving the overall user experience. Some of the examples of the features are as follows. Example Description Download link Columns with icons This example shows a features section with icons, titles, descriptions, and links. Download Hanging icons This example shows a simple features section with hanging icons. Download Custom card This example shows three custom cards that contain a title, icons, and images. Download Icon grid This example shows a features layout with icon grid. Download Features with title This example shows a feature section that has a small icon along with a title. Download Print Page Previous Next Advertisements ”;
Bootstrap-Cover Demo
Bootstrap – Cover Demo ”; Previous Next What is a cover? Cover is a one-page template for building a website with a header containing a navigation bar, a content section with a headline and description, and a footer with some additional information and links. The provided link shows an example of how to create a cover: Example Description Download link Cover This example shows a cover template with a header, content area, and footer. Download Print Page Previous Next Advertisements ”;
Bootstrap-Carousel RTL Demo
Bootstrap – Carousel RTL demo ”; Previous Next Overview RTL stands for “Right-to-Left,” and it refers to a writing direction. Some of the languages include Arabic, Hebrew, Persian, and Urdu. In RTL writing systems, text and content are read from right to left, opposite to the usual left-to-right direction used in languages like English. Refer the page RTL, to know more about it. What is a carousel? A carousel in bootstrap is a slideshow component that allows users to display multiple images, videos, or other types of content in a looping sequence. It is a responsive and dynamic component that can be easily customized. Bootstrap provides a set of classes that can be used to create a carousel component and customize it. Carousel feature can also be utilized in RTL direction. Two main classes for adding carousel are: class description .carousel This class sets up the basic structure of the carousel .carousel-item This class is used to define the individual slides within the carousel Optional classes to customize the slides in a carousel are: class description .slide Adds a sliding animation to the carousel .active Defines the initial active slide .carousel-indicators Adds navigation indicators to the bottom of the carousel .carousel-control-prev and carousel-control-next Adds left and right arrow buttons to the carousel for manual navigation .carousel-caption Adds a caption or description to each slide in the carousel Some of the examples of the carousels are as follows: Example Description Download link Basic carousel This example shows a basic carousel. Download Carousel with indicators This example shows a carousel with indicators. Download Carousel with captions This example shows a carousel with captions. Download Animated carousel This example shows a carousel with animation. Download Carousel with time interval This example shows a carousel with time interval. Download Autoplay carousel This example shows an autoplay carousel. Download Print Page Previous Next Advertisements ”;
Bootstrap – Blog Demo
Bootstrap – Blog Demo ”; Previous Next What is a blog? A blog in Bootstrap refers to a blog website that is built using the Bootstrap framework for its layout, design, and responsive capabilities. A blog can be created using various Bootstrap components, such as the grid system for layout, navigation bars, cards, and responsive design classes to ensure the blog looks good on various devices and screen sizes. The provided link shows an example of blog: Example Description Download link Blog This example indicates about blog in Bootstrap. Download Print Page Previous Next Advertisements ”;
Bootstrap – Overflow
Bootstrap – Overflow ”; Previous Next This chapter discusses about the overflow utility of Bootstrap. The overflow utility classes are used to control the behavior of overflowing content within an element. Bootstrap provides several utility classes related to overflow. By default these classes are not responsive. Class Description .overflow-auto automatically adds the scrollbar to the element if the content exceeds the dimensions of the element. .overflow-hidden hides the content when it exceeds the dimensions of the element. .overflow-scroll adds the scrollbar to the element regardless of whether the content exceeds the dimensions of the element or not. .overflow-visible allows the content to overflow the dimensions of the element without clipping or scrolling. Let us see an example: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Overflow</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <div class=”container p-3″> <h4 class=”text-start text-primary”> Overflow utility example</h4> <div class=”overflow-auto mt-3 pb-5 bg-light” style=”max-width: 360px; max-height: 80px;”> <code>.overflow-auto</code> is a class applied on an element with set width and height dimensions. By design, this content will vertically scroll, if overflowing. </div> <div class=”overflow-hidden mt-5 pb-5 bg-light” style=”max-width: 360px; max-height: 80px;”> <code>.overflow-hidden</code> is a utility class that is applied on an element with set width and height dimensions. This will hide the contents, when overflowing. </div> <div class=”overflow-visible mt-5 pb-5 bg-light” style=”max-width: 360px; max-height: 80px;”> <code>.overflow-visible</code> is a utility class that is applied on an element with set width and height dimensions. This will not hide the contents, when overflowing. </div> <div class=”overflow-scroll mt-5 pb-5 bg-light” style=”max-width: 360px; max-height: 80px;”> <code>.overflow-scroll</code> is a utility class that is applied on an element with set width and height dimensions. This will always show a scroll bar irrespective of whether the content will overflow or not. </div> <div class=”overflow-scroll mt-5 pb-5 bg-light” style=”max-width: 360px; max-height: 80px;”> <code>.overflow-scroll</code> is a utility class that shows a scroll bar always. </div> </div> </body> </html> overflow-x The overflow-x property is used to control the horizontal overflow behavior of an element. It determines what happens when the content within an element exceeds its width along the horizontal axis. The overflow-x property can have the following values: Class Description .overflow-x-auto automatically adds the horizontal scrollbar to the element if the content exceeds the width of the element. .overflow-x-hidden hides the content when it exceeds the width of the element along the horizontal axis. .overflow-x-scroll adds the horizontal scrollbar to the element regardless of whether the content exceeds the width of the element or not. .overflow-x-visible allows the content to overflow the dimensions of the element along the horizontal axis without clipping or scrolling. Let us see an example: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Overflow</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <div class=”container p-3″> <h4>Overflow-x-* Example</h4> <div class=”overflow-x-auto mt-3 pb-5″ style=”max-width: 340px; max-height: 90px;”> <code>.overflow-x-auto</code> allows the users to scroll horizontally and view the overflowed content. </div> <div class=”overflow-x-hidden mt-5 pb-5″ style=”max-width: 340px; max-height: 85px;”> <code>.overflow-x-hidden</code> is a class applied on an element with set width and height dimensions. This will hide the contents, when overflowing, along the x-axis. </div> <div class=”overflow-x-visible mt-5 pb-5″ style=”max-width: 340px; max-height: 80px;”> <code>.overflow-x-visible</code> is a class applied on an element with set width and height dimensions. This will not hide the contents, even when overflowing, along the x-axis. </div> <div class=”overflow-x-scroll mt-5 pb-5″ style=”max-width: 340px; max-height: 120px;”> <code>.overflow-x-scroll</code> This ensures that a horizontal scrollbar is always present, even if there is no actual overflow along the horizontal axis. </div> </div> </body> </html> overflow-y The overflow-y property is used to control the vertical overflow behavior of an element. It determines what happens when the content within an element exceeds its height along the vertical axis. The overflow-y property can have the following values: Class Description .overflow-y-auto automatically adds the vertical scrollbar to the element if the content exceeds the height of the element. .overflow-y-hidden hides the content when it exceeds the height of the element along the vertical axis. .overflow-y-scroll adds the vertical scrollbar to the element regardless of whether the content exceeds the height of the element or not. .overflow-y-visible allows the content to overflow the dimensions of the element along the vertical axis without clipping or scrolling. Let us see an example: Example You can edit and try running this code using the Edit & Run option. <!DOCTYPE html> <html> <head> <title>Bootstrap – Overflow</title> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <div class=”container mt-3″> <h4>Overflow-y-* Example</h4> <div class=”overflow-y-auto mt-3 pb-5″ style=”max-width: 340px; max-height: 80px;”> <code>.overflow-y-auto</code> allows the users to scroll vertically and view the overflowed content. In order to adjust the content, a vertical scroll bar should appear. </div> <div class=”overflow-y-hidden mt-5 pb-5″ style=”max-width: 340px; max-height: 80px;”> <code>.overflow-y-hidden</code> is a class applied on an element with set width and height dimensions. This will hide the contents, when overflowing, along the y-axis. </div> <div class=”overflow-y-visible mt-5 pb-5″ style=”max-width: 340px; max-height: 70px;”> <code>.overflow-y-visible</code> is a class applied on an element with set width and height dimensions. This will not
Bootstrap-Album Demo
Bootstrap – Album demo ”; Previous Next What is album? Album is a simple one-page template that focuses on creating album-related components or layouts. These components might include photo galleries, sliders, or other elements commonly used in displaying albums or collections of images. The provided link shows an example of how to create an album: Example Description Download link Album This example shows an album website template with a card that has an image, navbar, title, description, button, and footer. Download Print Page Previous Next Advertisements ”;