7.2. Bootstrap5 installation and use

发布时间 ： 2025-10-25 13:35:30 UTC      

Page Views: 44 views

We can install Bootstrap5 in two ways:

Image0

7.2.1. Bootstrap 5 CDN

Libraries on Staticfile CDN are recommended in China:

Bootstrap5 CDN

Note: popper.min.js used to set pop-up windows, prompts, and drop-down menus.

bootstrap.bundle.js (uncompressed version) or bootstrap.bundle.min.js (compressed version) contains bundled plug-ins such as popper.min.js and other dependent scripts, so we can also use the following code directly:

Bootstrap5 CDN

In addition, you can use the following CDN services:

7.2.2. Download Bootstrap 5

You can download the Bootstrap5 repository from the official website https://getbootstrap.com/ .

Note: in addition, you can also install it through the package management tools npm, yarn, gem, composer, etc.

npm install bootstrap

yarn add bootstrap

gem install bootstrap -v 5.1.1

composer require twbs/bootstrap:5.1.1

Create the first Bootstrap 5 page

7.2.3. 1.Add HTML5 doctype

Bootstrap requires the use of the HTML5 file type, so you need to add a HTML5 doctype declaration.

HTML5 doctype declares in the document header and sets the corresponding encoding:

7.2.4. Mobile device priority

To make the website developed by Bootstrap friendly to mobile devices and ensure proper rendering and touchscreen scaling, you need to add a viewport meta tag to the head of the web page, as shown below:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width Indicates that the width is the width of the device screen.

initial-scale=1 Represents the initial scale.

Container class

Bootstrap 5 requires a container element to wrap the content of the site.

We can use the following two container classes:

  • .container class is used for containers that are fixed in width and support a responsive layout.

  • .container-fluid class is used for containers that are 100% wide and occupy all viewports (viewport).

Image1

Two Bootstrap 5 pages

Bootstrap5 .container example

<div class="container">
  <h1>My first Bootstrap pageh1>
  <p>These are some texts.p>
div>
   
 The following example shows a container that occupies all viewports (viewport). 
 
 Bootstrap5   .container-fluid   example 
 
 
 
<div class="container-fluid">
  <h1>My first Bootstrap pageh1>
  <p>Used. container fluid, 100% width, occupying all viewport containers.p>
div>
      
                    
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            7.2. Bootstrap5 installation and use 
                        

                    

                

            
        
        

            

    
        

            

                

                    
                        
                        
                            
Principles and Applications of WebGIS 

                        
                        
                             37
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
Web框架 

                        
                        
                             942
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
WEB基础 

                        
                        
                             287
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
Principles, Technologies, and Methods of Geographic Information Systems 

                        
                        
                             102
                        
                    
                    
                        

                            
 
 
 In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.