.. Bekmuhammad 🤙

Buttons

          
           <button class="btn btn-primary"> Primary </button >

           <button class="btn btn-secondary"> Secondary </button>

           <button class="btn btn-success"> Success </button>

           <button class="btn btn-danger"> Danger </button>

           <button class="btn btn-info">Info</button>

           <button class="btn btn-dark">Dark</button>

Inputs

        
          <input type="text" class="input" placeholder="Enter smth text..." />

          <input type="text" class="input input-success" placeholder="Success" />

          <input type="text" class="input input-error" placeholder="Error" />

          <input type="text" class="input input-warning" placeholder="Warning" />

          <input type="text" class="input input-info" placeholder="Info" />
☀

Background Colors

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants. 

        
          <color red: London is the most populous city in the United Kingdom, with a metropolitan area of over  />
  
          < color teal: London is the most populous city in the United Kingdom, with a metropolitan area of over  />
  
          <color yellow: London is the most populous city in the United Kingdom, with a metropolitan area of over  />
  
          <color gray: London is the most populous city in the United Kingdom, with a metropolitan area of over  />
  
          <color blue: London is the most populous city in the United Kingdom, with a metropolitan area of over  />

Using CSS to style an HTML Form

          
            <div class="w3-card-4" style="width:50%" />
    
            <img src="https://picsum.photos/id/111/300/300" alt="Alps" style="width:100%" />
    
            <div class="w3-container w3-center" />
    
            < p  The Italian / Austrian Alps  p />

Round Classes

w3-round-small

w3-round

w3-round-large

w3-round-xlarge

w3-round-xxlarge

        


         < div class="w3-container"


         <h2 Round Classes h2/>
          
         <div class="w3-panel w3-round-small w3-teal">
         <p>w3-round-small p>
            div>

            <div class="w3-panel w3-round-small w3-teal">
            <p>w3-round-small p>
               div>

               <div class="w3-panel w3-round-small w3-teal">
               <p>w3-round-small p>
                  div>

                  <div class="w3-panel w3-round-small w3-teal">
                  <p>w3-round-small p>
                     div>

                     <div class="w3-panel w3-round-small w3-teal">
                     <p>w3-round-small p>
                        div>

                        <div class="w3-panel w3-round-small w3-teal">
                        <p>w3-round-small p>
                           div>

                           <div class="w3-panel w3-round-small w3-teal">
                           <p>w3-round-small p>
                              div>
          
        
                              div/>

List as a Card

The w3-card class makes the list look like a card:

  • Jill
  • Eve
  • Adam

More shadows:

  • Jill
  • Eve
  • Adam
        
          <div class="w3-container bg-" 
  
          <h2 List as a Card  h2 />
  
          <p  The w3-card class makes the list look like a card: p />
  
          <ul class="w3-ul w3-card" style="width:50%" 

          <li  Jill  li />
  
          < li  eve li />

          <li  adam   li />

          ul/>

          
          <ul class="w3-ul w3-card" style="width:50%" 

          <li  Jill  li />
  
          < li  eve li />

          <li  adam   li />

          ul/>
                                           />