AdminLTE
Toggle navigation
  • 4
    • You have 4 messages
      • User Image

        Support Team 5 mins

        Why not buy a new awesome theme?

      • user image

        AdminLTE Design Team 2 hours

        Why not buy a new awesome theme?

      • user image

        Developers Today

        Why not buy a new awesome theme?

      • user image

        Sales Department Yesterday

        Why not buy a new awesome theme?

      • user image

        Reviewers 2 days

        Why not buy a new awesome theme?

    • See All Messages
  • 10
    • You have 10 notifications
      • 5 new members joined today
      • Very long description here that may not fit into the page and may cause design problems
      • 5 new members joined
      • 25 sales made
      • You changed your username
    • View all
  • 9
    • You have 9 tasks
      • Design some buttons 20%

        20% Complete
      • Create a nice theme 40%

        40% Complete
      • Some task I need to do 60%

        60% Complete
      • Make beautiful transitions 80%

        80% Complete
    • View all tasks
  • Jane Doe
    • User Image

      Jane Doe - Web Developer Member since Nov. 2012

    • Followers
      Sales
      Friends
    • Profile
      Sign out
User Image

Hello, Jane

Online
  • Dashboard
  • Widgets new
  • Charts
    • Morris
    • Flot
    • Inline charts
  • UI Elements
    • General
    • Icons
    • Buttons
    • Sliders
    • Timeline
  • Forms
    • General Elements
    • Advanced Elements
    • Editors
  • Tables
    • Simple tables
    • Data tables
  • Calendar 3
  • Mailbox 12
  • Examples
    • Invoice
    • Login
    • Register
    • Lockscreen
    • 404 Error
    • 500 Error
    • Blank Page

Buttons Control panel

  1. Home
  2. UI
  3. Buttons

Buttons

Various types of buttons. Using the base class .btn

Normal Large .btn-lg Mini .btn-sm Flat .btn-flat Disabled .disabled

Block Buttons

Horizontal Button Group

Horizontal button groups are easy to create with bootstrap. Just add your buttons inside <div class="btn-group"></div>

Button Icons Flat Dropdown
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link

Button Addon

With dropdown

  • Action
  • Another action
  • Something else here
  • Separated link

Normal

Flat

Split buttons

Normal slplit buttons:

  • Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link

Flat split buttons:

  • Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link

Social Icons Sample

Font Awesome provides a set of social media icons. We are using .btn.btn-social and to add the colors to the buttons we use the .bg-* classes.









Application Buttons

Add the classes .btn.btn-app to an <a> tag to achieve the following:

Edit Play Repeat Pause Save 3 Notifications 300 Products 891 Users 67 Orders 12 Inbox 531 Likes

Different colors

Mix and match with various background colors. Use base class .btn and add any available .bg-* class

Vertical Button Group

Vertical button groups are easy to create with bootstrap. Just add your buttons inside <div class="btn-group-vertical"></div>

Button Icons Flat Dropdown
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link
  • Dropdown link