### Install Bootstrap via RubyGems (Command Line) Source: https://getbootstrap.com/docs/4.5/getting-started/download Installs the Bootstrap gem using the command line if not using Bundler. This method also requires a Sass compiler and Autoprefixer for a setup matching official compiled versions. ```shell gem install bootstrap -v 4.5.3 ``` -------------------------------- ### Install Bootstrap Dependencies with npm Source: https://getbootstrap.com/docs/4.5/getting-started/build-tools Installs the local dependencies for Bootstrap by running the npm install command in the project's root directory. This command reads the package.json file to fetch and install all necessary packages. ```bash npm install ``` -------------------------------- ### Install Bootstrap via RubyGems (Bundler) Source: https://getbootstrap.com/docs/4.5/getting-started/download Installs Bootstrap into your Ruby applications using Bundler and RubyGems. This is the recommended method for Ruby projects. Ensure you have a Sass compiler and Autoprefixer for a setup matching official compiled versions. ```ruby gem 'bootstrap', '~> 4.5.0' ``` -------------------------------- ### Display Example Code Block Source: https://getbootstrap.com/docs/4.5/examples/blog This snippet demonstrates a basic example of a code block, often used to display code snippets within documentation or content. It's language-agnostic and serves as a placeholder. ```text Example code block ``` -------------------------------- ### Install Bootstrap via npm Source: https://getbootstrap.com/docs/4.5/getting-started/download Installs Bootstrap into your Node.js applications using the npm package manager. The `require('bootstrap')` command loads all jQuery plugins. Note that Bootstrap requires a Sass compiler and Autoprefixer for a setup matching official compiled versions. ```shell npm install bootstrap ``` -------------------------------- ### Install Ruby Dependencies for Jekyll Source: https://getbootstrap.com/docs/4.5/getting-started/build-tools Installs all Ruby dependencies required for running the Bootstrap documentation locally, including Jekyll and its plugins. This is a prerequisite for serving the documentation. ```bash bundle install ``` -------------------------------- ### Install Bootstrap via Composer Source: https://getbootstrap.com/docs/4.5/getting-started/download Installs Bootstrap's Sass and JavaScript assets into your project using Composer, a dependency manager for PHP. A Sass compiler and Autoprefixer are needed for a setup matching official compiled versions. ```shell composer require twbs/bootstrap:^4.5.0 ``` -------------------------------- ### Bootstrap Grid Columns - Three Equal Columns Source: https://getbootstrap.com/docs/4.5/examples/grid Illustrates creating three equal-width columns that start at the 'md' (medium) breakpoint and scale up. On smaller devices, these columns will automatically stack. ```html

.col-md-4

``` -------------------------------- ### Bootstrap Grid Columns - Two Columns Source: https://getbootstrap.com/docs/4.5/examples/grid Demonstrates a simple two-column layout starting at the 'md' breakpoint. This example uses 8/4 column widths for a common desktop layout. ```html

.col-md-8

.col-md-4

``` -------------------------------- ### Install Bootstrap via yarn Source: https://getbootstrap.com/docs/4.5/getting-started/download Installs Bootstrap into your Node.js applications using the yarn package manager. Similar to npm, this method requires a Sass compiler and Autoprefixer for a setup matching official compiled versions. ```shell yarn add bootstrap ``` -------------------------------- ### Install Bootstrap CSS via NuGet Source: https://getbootstrap.com/docs/4.5/getting-started/download Installs Bootstrap's CSS files into your .NET project using the NuGet package manager. Note that this option primarily focuses on CSS and may require separate handling for JavaScript components. ```shell Install-Package bootstrap ``` -------------------------------- ### Include Bootstrap CSS Source: https://getbootstrap.com/docs/4.5/getting-started/introduction To add Bootstrap's styling to your project, copy and paste this stylesheet link into the `` section of your HTML document before any other stylesheets. ```html

``` -------------------------------- ### Bootstrap Grid Columns - Basic Layouts Source: https://getbootstrap.com/docs/4.5/examples/grid Demonstrates the basic structure of Bootstrap grid columns, showing how classes like .col-4 are used. These examples are intended to familiarize users with the fundamental building blocks of the Bootstrap grid system. ```html

.col-4

``` -------------------------------- ### Bootstrap Spacing Utility Classes Examples Source: https://getbootstrap.com/docs/4.5/utilities/spacing Demonstrates the usage of Bootstrap's spacing utility classes for common layout tasks like horizontal centering and negative margin applications. These examples showcase how to apply predefined margin and padding values to elements. ```html

Centered element

``` ```html

Custom column padding

``` -------------------------------- ### Bootstrap 4 Basic Form Example Source: https://getbootstrap.com/docs/4.5/components/forms A fundamental example demonstrating the structure of a basic form with email and password inputs, a checkbox, and a submit button using Bootstrap 4 classes. ```html ``` -------------------------------- ### Media Object Alignment Examples (HTML) Source: https://getbootstrap.com/docs/4.5/components/media-object Shows how to align media content within the `.media-body` using Bootstrap's flexbox utilities. Examples include top, center, and bottom alignment. ```html

Top-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Center-aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Bottom-aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

```