Bootstrap ボタン Bootstrap

Bootstrap 5の.btnクラスを視覚調整。色・サイズ・outline・disabled・block・アイコン対応。

HTML


          


          
CDN (Bootstrap 5)

          

            
            
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

          

        

      

    


    

      
Bootstrap ボタンクラス

      
    
        
  • btn btn-{color} - 基本ボタン (primary/secondary/success/danger/warning/info/light/dark/link)
    • 
        
  • btn-outline-{color} - 枠線スタイル
    • 
        
  • btn-lg / btn-sm - サイズ変更
    • 
        
  • disabled / active - 状態
    • 
        
  • w-100 - 幅100% (旧 btn-block の代替)
    • 
      


      
関連ツール

      
    


    

      
同カテゴリの関連ツール