How to give spacing between buttons using bootstrap

Question

I want to give spacing between buttons is there a way to give spacing using bootstrap so that they will be consistent for different screen resolutions   I tried using margin-left But is it the correct way to do this     Here is the demo  HTML    lt div class  btn-toolbar text-center well  gt       lt button type  button  class  btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left  gt         lt span class  glyphicon glyphicon-plus  aria-hidden  true  gt  lt  span gt  ADD PACKET      lt  button gt       lt button type  button  class  btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left  gt         lt span class  glyphicon glyphicon-edit  aria-hidden  true  gt  lt  span gt  EDIT CUSTOMER      lt  button gt       lt button type  button  class  btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left  gt         lt span class  glyphicon glyphicon-time  aria-hidden  true  gt  lt  span gt  HISTORY      lt  button gt       lt button type  button  class  btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left  gt         lt span class  glyphicon glyphicon-trash  aria-hidden  true  gt  lt  span gt  DELETE CUSTOMER      lt  button gt   lt  div gt    CSS    margin-left      margin-left  80px  important

User · Answer

Depends on how much space you want  I m not sure I agree with the logic of adding a  col-XX-1  in between each one  because you are then defining an entire  column  in between each one   If you just want  a little spacing  in between each button  I like to add padding to the encompassing row  That way  I can still use all 12 columns  while including a  space  in between each button   Bootply  http   www bootply com ugeXrxpPvD

User · Answer

I am pretty bad at html but I used  amp nbsp  between the buttons and it worked well

User · Answer

You can use built-in spacing from Bootstrap so no need for additional CSS there  This is for Bootstrap 4

User · Answer

using bootstrap you can add   lt div class  col-sm-1 col-xs-1 col-md-1 col-lg-1  gt  lt  div gt  between buttons

User · Answer

You can achieved by use bootstrap Spacing  Bootstrap Spacing includes a wide range of shorthand responsive margin and padding  In below example mr-1 set the margin or padding to  spacer    25   Example    lt button class  btn btn-outline-primary mr-1  href     gt Sign up lt  button gt   lt button class  btn btn-outline-primary  href     gt Login lt  button gt    You can read more at Bootstrap Spacing

User · Answer

Adding margins to a button makes it wider so that les buttons fit in the grid system  If only a visual effect is important  then give the button a white border with  style  margin 0px  border solid white    This leaves the button width unaffected

User · Answer

The original code is mostly there  but you need btn-groups around each button   In Bootstrap 3 you can use a btn-toolbar and a btn-group to get the job done  I haven t done BS4 but it has similar constructs    lt div class  btn-toolbar  role  toolbar  gt     lt div class  btn-group  role  group  gt       lt button class  btn btn-default  gt Button 1 lt  button gt     lt  div gt     lt div class  btn-group  role  group  gt       lt button class  btn btn-default  gt Button 2 lt  button gt     lt  div gt   lt  div gt

User · Answer

If you want use margin  remove the class on every button and use  last-child CSS selector   Html     lt div class  btn-toolbar text-center well  gt       lt button type  button  class  btn btn-primary btn-color btn-bg-color btn-sm col-xs-2  gt         lt span class  glyphicon glyphicon-plus  aria-hidden  true  gt  lt  span gt  ADD PACKET      lt  button gt       lt button type  button  class  btn btn-primary btn-color btn-bg-color btn-sm col-xs-2  gt         lt span class  glyphicon glyphicon-edit  aria-hidden  true  gt  lt  span gt  EDIT CUSTOMER      lt  button gt       lt button type  button  class  btn btn-primary btn-color btn-bg-color btn-sm col-xs-2  gt         lt span class  glyphicon glyphicon-time  aria-hidden  true  gt  lt  span gt  HISTORY      lt  button gt       lt button type  button  class  btn btn-primary btn-color btn-bg-color btn-sm col-xs-2  gt         lt span class  glyphicon glyphicon-trash  aria-hidden  true  gt  lt  span gt  DELETE CUSTOMER      lt  button gt   lt  div gt    Css     btn-toolbar  btn      margin-right  5px     btn-toolbar  btn last-child      margin-right  0

User · Answer

Use btn-primary-spacing class for all buttons remove margin-left class  Example      lt button type  button  class  btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing  gt     lt span class  glyphicon glyphicon-plus  aria-hidden  true  gt  lt  span gt  ADD PACKET  lt  button gt    CSS will be like     btn-primary-spacing    margin-right  5px  margin-bottom  5px  important

User · Answer

HTML    lt input id  id ok  class  btn btn-space  value  OK  type  button  gt   lt input id  id cancel  class  btn btn-space  value  Cancel  type  button  gt    CSS    btn-space       margin-right  5px

User · Answer

Wrap your buttons in a div with class  col-xs-3   for example   Add class  btn-block  to your buttons     This will provide permanent spacing

[html] How to give spacing between buttons using bootstrap

Examples related to html

Examples related to css

Examples related to twitter-bootstrap