How to show Bootstrap table with sort icon

Question

Am new to Bootstrap  i have a requirement to show a table with sort up and down arrow near to title of the table  This is my table structure    lt table class  table table-bordered table-striped  gt           lt thead gt           lt tr gt               lt th gt  lt b gt   lt  b gt    lt i class  icon-arrow-up  gt  lt  i gt  lt i class  icon-arrow-down  gt  lt  th gt       tried                 lt th  gt  lt b gt Name lt  b gt  lt  th gt               lt th gt  lt b gt Email lt  b gt  lt  th gt               lt th gt  lt b gt Team lt  b gt  lt  th gt               lt th  gt  lt b gt Role lt  b gt  lt  th gt               lt th  gt  lt b gt Timezone lt  b gt  lt  th gt               lt th gt  lt b gt Connections lt  b gt  lt  th gt               lt th gt  lt b gt   Posts available lt  b gt  lt  th gt               lt th gt  lt b gt Last Login lt  b gt  lt  th gt               lt th gt  lt b gt Posts lt  b gt  lt  th gt           lt  tr gt           lt  thead gt           lt tbody gt           lt  tbody gt       lt  table gt    I want to display sort up down arrows similar to the following image     Please help me to solve this issue  Your help is much appreciated  Thank you

User · Accepted Answer

You could try using FontAwesome  It contains a sort-icon  http   fontawesome io icon sort     To do so  you would    need to include fontawesome    lt link href    maxcdn bootstrapcdn com font-awesome 4 1 0 css font-awesome min css  rel  stylesheet  gt   and then simply use the fontawesome-icon instead of the default-bootstrap-icons in your th s    lt th gt  lt b gt   lt  b gt   lt i class  fa fa-fw fa-sort  gt  lt  i gt  lt  th gt     Hope that helps

User · Answer

BOOTSTRAP 4  you can use a combination of  fa-chevron-down  fa-chevron-up  fa-sort-down  fa-sort-up     lt th class  quot text-center quot  gt       lt div class  quot btn-group quot  role  quot group quot  gt           lt button type  quot button quot  class  quot btn btn-xs btn-link py-0 pl-0 pr-1 quot  gt               Some Text OR icon          lt  button gt           lt div class  quot btn-group-vertical quot  gt               lt a href  quot  sort asc quot  class  quot btn btn-xs btn-link p-0 quot  gt                   lt i class  quot fas fa-sort-up quot  gt  lt  i gt               lt  a gt               lt a href  quot  sort desc quot  class  quot btn btn-xs btn-link p-0 quot  gt                   lt i class  quot fas fa-sort-down quot  gt  lt  i gt               lt  a gt           lt  div gt       lt  div gt   lt  th gt

User · Answer

Use this icons with bootstrap  glyphicon     lt span class  glyphicon glyphicon-triangle-bottom  gt  lt  span gt   lt span class  glyphicon glyphicon-triangle-top  gt  lt  span gt    http   www w3schools com bootstrap tryit asp filename trybs ref glyph triangle-bottom amp stacked h  http   www w3schools com bootstrap tryit asp filename trybs ref glyph triangle-bottom amp stacked h

[twitter-bootstrap] How to show Bootstrap table with sort icon

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3