Bootstrap 4 - Inline List

Question

I migrated a site from Bootstrap 4 alpha 6 to Bootstrap 4 Beta 1     lt ul class  nav navbar-nav list-inline  gt     lt li class  list-inline-item  gt  lt a class  social-icon text-xs-center  target   blank  href     gt FB lt  a gt  lt  li gt     lt li class  list-inline-item  gt  lt a class  social-icon text-xs-center  target   blank  href     gt G  lt  a gt  lt  li gt     lt li class  list-inline-item  gt  lt a class  social-icon text-xs-center  target   blank  href     gt T lt  li gt   lt  ul gt    Now  the items align vertically instead of horizontally  How do I create an inline list with the Bootstrap 4 beta

User · Answer

Shouldn t it be just the  list-group  See below    lt ul class  list-group  gt     lt li class  list-group-item active  gt Cras justo odio lt  li gt     lt li class  list-group-item  gt Dapibus ac facilisis in lt  li gt     lt li class  list-group-item  gt Morbi leo risus lt  li gt     lt li class  list-group-item  gt Porta ac consectetur ac lt  li gt     lt li class  list-group-item  gt Vestibulum at eros lt  li gt   lt  ul gt    Reference  Bootstrap 4 Basic Example of a List group

User · Answer

list-inline class in bootstrap is a Inline Unordered List   If you want to create a horizontal menu using ordered or unordered list you need to place all list items in a single line i e  side by side  You can do this by simply applying the class   lt div class  quot list-inline quot  gt       lt a href  quot   quot  class  quot list-inline-item quot  gt First item lt  a gt       lt a href  quot   quot  class  quot list-inline-item quot  gt Secound item lt  a gt       lt a href  quot   quot  class  quot list-inline-item quot  gt Third item lt  a gt     lt  div gt

User · Answer

Inline  x000D   x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta css bootstrap min css   gt   lt script src  https   code jquery com jquery-3 2 1 slim min js  integrity  sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr rE9 Qpg6aAZGJwFDMVNA GpGFF93hXpG5KkN  crossorigin  anonymous  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 11 0 umd popper min js  integrity  sha384-b U6ypiBEHpOf 4 1nzFpr53nxSS GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4  crossorigin  anonymous  gt  lt  script gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta js bootstrap min js  integrity  sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1  crossorigin  anonymous  gt  lt  script gt     lt ul class  list-inline  gt     lt li class  list-inline-item  gt  lt a class  social-icon text-xs-center  target   blank  href     gt FB lt  a gt  lt  li gt     lt li class  list-inline-item  gt  lt a class  social-icon text-xs-center  target   blank  href     gt G  lt  a gt  lt  li gt     lt li class  list-inline-item  gt  lt a class  social-icon text-xs-center  target   blank  href     gt T lt  a gt  lt  li gt   lt  ul gt  x000D   x000D   x000D   and learn more about  https   getbootstrap com docs 4 0 content typography  inline

User · Answer

Bootstrap4  Remove a list   s bullets and apply some light margin with a combination of two classes   list-inline and  list-inline-item    lt ul class  list-inline  gt      lt li class  list-inline-item  gt  lt a class  social-icon text-xs-center  target   blank  href     gt FB lt  a gt  lt  li gt      lt li class  list-inline-item  gt  lt a class  social-icon text-xs-center  target   blank  href     gt G  lt  a gt  lt  li gt      lt li class  list-inline-item  gt  lt a class  social-icon text-xs-center  target   blank  href     gt T lt  a gt  lt  li gt   lt  ul gt

User · Answer

The html code you written is absolutely perfect    lt ul class  nav navbar-nav list-inline  gt    lt li class  list-inline-item  gt FB lt  li gt    lt li class  list-inline-item  gt G  lt  li gt    lt li class  list-inline-item  gt T lt  li gt    lt  ul gt    The reasons that could be possible is 1  Check out the CSS for class name  nav  or  navbar-nav  may be over writing it  try to remove and debug the class names in the ul element 2  Check any of the child element a tag or  social-icon  class  is using block level CSS style3  Check out your using a HTML5  DOCTYPE html 4  Place your bootstrap css link at the last before closing your head tag 5  Change text-xs-center to text-center because xs is dropped in Bootstrap 4    This One will work perfectly fine    lt  -- Use this inside Head tag-- gt   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta 2 css bootstrap min css  gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta 2 js bootstrap min js  gt  lt  script gt      lt  -- Use this inside Body tag-- gt   lt div  class  container  gt   lt ul class  list-inline  gt   lt li class  list-inline-item  gt  lt a class  social-icon text-center  target   blank  href     gt FB lt  a gt  lt  li gt   lt li class  list-inline-item  gt  lt a class  social-icon text-center  target   blank  href     gt G  lt  a gt  lt  li gt   lt li class  list-inline-item  gt  lt a class  social-icon text-center  target   blank  href     gt T lt  a gt  lt  li gt   lt  ul gt   lt  div gt

[css] Bootstrap 4 - Inline List?

Examples related to css

Examples related to twitter-bootstrap