how to make space between two bootstrap button

Question

You can see the below code I'm trying to create two buttons in same line but its not work I want to make two button in same line in this code

 <div class="w3-show-inline-block">
  <div class="w3-bar">
    <button class="btn btn-success"  onClick={() => this._filterByYear('2006')}>2006</button>
    <button class="btn btn-success"  onClick={() => this._filterByYear('2007')}>2007</button>
  </div>
  </div>
  <div class="w3-show-inline-block">
  <div class="w3-bar">
    <button class="btn btn-success"  onClick={() => this._filterByYear('2008')}>2008</button>
    <button class="btn btn-success"  onClick={() => this._filterByYear('2009')}>2009</button>

In demo code here why no space between two button i want like this https://ibb.co/rFD6knk

Demo

i want to make two button between space like this https://ibb.co/rFD6knk — shreyas singh, Aug 09 '20 at 12:27
anybody please help me why two button make not space you can see and check here also codepen.io/namratasep6/pen/JjXoxBv — shreyas singh, Aug 09 '20 at 12:28

score 1 · Answer 1 · edited Aug 09 '20 at 12:57

1

Here is a good solution. Just paste this into your css:

.w3-bar {
    display: flex; 
    justify-content: space-between;
}

edited Aug 09 '20 at 12:57

N3R4ZZuRR0

2,400
4
18
32

answered Aug 09 '20 at 12:52

s.kuznetsov

14,870
3
10
25

Thanks for help and support and i want body part like this ibb.co/rFD6knk like in one card in one image.here its working codepen.io/namratasep6/pen/JjXoxBv but i implement in project setup its not work here you can see code github.com/namratasoni-coder/react_pro – shreyas singh Aug 09 '20 at 13:01

score 0 · Accepted Answer · edited Aug 11 '20 at 10:06

0

Add this CSS :

button {
    margin-left: 10px;
    margin-top: 10px;
    background: white;
    padding: 10px 20px;
    border: none;
}

Here margin-left will give you the space between two , I have added more styling option here which will help you.

The margin-left and margin-top gives space, the background changes the background of the button, the padding adds space inside the button, and border gets rid of the default border.

edited Aug 11 '20 at 10:06

corn on the cob

2,093
3
18
29

answered Aug 09 '20 at 12:34

Thanks for help and support and i want body part like this https://ibb.co/rFD6knk like in one card in one image.here its working https://codepen.io/namratasep6/pen/JjXoxBv but i implement in project setup its not work here you can see code https://github.com/namratasoni-coder/react_pro – shreyas singh Aug 09 '20 at 12:46

bertdida · Answer 3 · 2020-08-11T06:23:59.920

0

These styles would do.

.w3-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  padding: 5px 0;
}

.w3-btn {
  max-width: fit-content;
}

nav {
  max-width: 200px;
}

img {
  width: 100%;
}

~~Codepen~~

edited Aug 11 '20 at 06:23

answered Aug 09 '20 at 12:46

bertdida

4,988
2
16
22

Thanks for help and support and i want body part like this ibb.co/rFD6knk like in one card in one image.here its working codepen.io/namratasep6/pen/JjXoxBv but i implement in project setup its not work here you can see code github.com/namratasoni-coder/react_pro – shreyas singh Aug 09 '20 at 12:49
help me out i m facing isuue – shreyas singh Aug 09 '20 at 12:50
I updated my answer with `nav` and `img` styles. You can check on the CodePen link above. – bertdida Aug 09 '20 at 12:51
thanks for help in code pen work fine BUT i m implement the react project its not work image card. – shreyas singh Aug 09 '20 at 12:58
you can check here https://github.com/namratasoni-coder/react_pro – shreyas singh Aug 09 '20 at 12:58

how to make space between two bootstrap button

3 Answers3