CODEWITHSUNDEEP
csstwitter-bootstrap
Raghu
Raghu

Reputation: 61

Spacing between Bootstrap buttons

How do I make sure that there is spacing between the buttons when i use the following piece of code

<div class="container">
   <div class="jumbotron">
    <button ng-repeat="char in alphabet" ng-click="filterByAlphabet(char)">{{char}}</button>
    <br><br>         
    <span ng-repeat="genre in genres"> 
        <button class="btn btn-xs" ng-click="filterByGenre(genre)">{{genre}}</button>            
    </span>            

</div>

Upvotes: 2

Views: 10383

Answers (5)

user6031769
user6031769

Reputation: 76

You can use Bootstrap spacing, docs here --> https://getbootstrap.com/docs/4.0/utilities/spacing/

This example uses the class 'mr-2' to add right margins to buttons

<button id="button1" class="btn btn-primary mr-2">Button 1</button>
<button id="button2" class="btn btn-primary mr-2">Button 2</button>
<button id="button3" class="btn btn-primary">Button 3</button>

Upvotes: 5

Cameron Forward
Cameron Forward

Reputation: 712

'btn-toolbar' does the trick in one fell swoop. No manual css'ing required

<div class="btn-toolbar">
    <button id="button1" class="btn btn-primary">Button 1</button>
    <button id="button2" class="btn btn-primary">Button 2</button>
    <button id="button3" class="btn btn-primary">Button 3</button>
</div>

Upvotes: 5

Jnewbie
Jnewbie

Reputation: 163

.capsule{
	 padding: 0 30px;
	}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="container">
	   <div class="jumbotron">
		<span class="col-xs-4"> &nbsp; </span>
			<span class="capsule col-xs-2">
				<button ng-repeat="char in alphabet" ng-click="filterByAlphabet(char)">{{char}}</button>        
			</span>
			<span class="capsule col-xs-2" ng-repeat="genre in genres"> 
				<button class="btn btn-xs" ng-click="filterByGenre(genre)">{{genre}}</button>            
			</span>            

		</div>

i added one empty span to center the jumbo in the screen, also added "capsule" span to get space between the buttons.

Hope it helps!

Upvotes: 0

Atal Kishore
Atal Kishore

Reputation: 4738

Use css property margin

button { margin: 5px 5px 5px 5px } //change the value to see the effect and choose for yourself which value to keep

margin: margin-top margin-right margin-bottom margin-left ;

Upvotes: 2

d.coder
d.coder

Reputation: 2038

Set right margin on buttons:

<div class="container">
   <div class="jumbotron">
    <button ng-repeat="char in alphabet" ng-click="filterByAlphabet(char)" style="margin-right: 10px;">{{char}}</button>
    <br><br>         
    <span ng-repeat="genre in genres"> 
        <button class="btn btn-xs" ng-click="filterByGenre(genre)" style="margin-right: 10px;">{{genre}}</button>            
    </span>            
</div>

Hope, this is what you're looking for.

Upvotes: 1

Related Questions