Bootstrap - custom radio buttons

up vote
-1
down vote

favorite

I would like to make some custom bootstrap radio buttons.

I saw the documentation: https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons

Is their a way to separate the buttons so they look like 3 separated buttons and not like one long button.

And if their is such way - can I change the colour of the chosen button when the user chooses it?

Thank you!

edited 2 days ago

Adriano

1,17911123

asked Nov 7 at 5:28

pnina

add a comment |

up vote
-1
down vote

favorite

I would like to make some custom bootstrap radio buttons.

I saw the documentation: https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons

Is their a way to separate the buttons so they look like 3 separated buttons and not like one long button.

And if their is such way - can I change the colour of the chosen button when the user chooses it?

Thank you!

edited 2 days ago

Adriano

1,17911123

asked Nov 7 at 5:28

pnina

add a comment |

up vote
-1
down vote

favorite

I would like to make some custom bootstrap radio buttons.

I saw the documentation: https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons

Is their a way to separate the buttons so they look like 3 separated buttons and not like one long button.

And if their is such way - can I change the colour of the chosen button when the user chooses it?

Thank you!

edited 2 days ago

Adriano

1,17911123

asked Nov 7 at 5:28

pnina

I would like to make some custom bootstrap radio buttons.

I saw the documentation: https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons

Is their a way to separate the buttons so they look like 3 separated buttons and not like one long button.

And if their is such way - can I change the colour of the chosen button when the user chooses it?

Thank you!

bootstrap-4

edited 2 days ago

Adriano

1,17911123

asked Nov 7 at 5:28

pnina

edited 2 days ago

Adriano

1,17911123

asked Nov 7 at 5:28

pnina

edited 2 days ago

Adriano

1,17911123

edited 2 days ago

Adriano

1,17911123

edited 2 days ago

Adriano

1,17911123

asked Nov 7 at 5:28

pnina

asked Nov 7 at 5:28

pnina

asked Nov 7 at 5:28

pnina

add a comment |

2 Answers
2

active

oldest

votes

up vote
-1
down vote

accepted

<!doctype html>

<html lang="en">



<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Bootstrap</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>



<body>

  <div class="btn-group btn-group-toggle" data-toggle="buttons">

    <label class="btn btn-primary rounded mr-1 active">

			<input type="radio" name="options" id="option1" autocomplete="off" checked=""> Active

		</label>

    <label class="btn btn-success rounded mr-1">

			<input type="radio" name="options" id="option2" autocomplete="off"> Radio

		</label>

    <label class="btn btn-danger rounded">

			<input type="radio" name="options" id="option3" autocomplete="off"> Radio

		</label>

  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body>



</html>

If you ever heard about "margins", yes you can.

edited Nov 7 at 5:43

answered Nov 7 at 5:37

Sherif Salah

14417

add a comment |

up vote
-1
down vote

You're basically asking how to use a component for something that hasn't been built for.

It is advisable to use radio buttons as radio buttons and normal buttons as normal buttons.

Anyway, this is how you can do it (one of the many ways):

add the class mr-1 to each button. It will add some margin-right that you can customise in your _variables.scss file, by adding this class your buttons will be separated by some space.

answered Nov 7 at 5:39

Adriano

1,17911123

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53184019%2fbootstrap-custom-radio-buttons%23new-answer', 'question_page');
}
);

Post as a guest

Name

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
-1
down vote

accepted

<!doctype html>

<html lang="en">



<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Bootstrap</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>



<body>

  <div class="btn-group btn-group-toggle" data-toggle="buttons">

    <label class="btn btn-primary rounded mr-1 active">

			<input type="radio" name="options" id="option1" autocomplete="off" checked=""> Active

		</label>

    <label class="btn btn-success rounded mr-1">

			<input type="radio" name="options" id="option2" autocomplete="off"> Radio

		</label>

    <label class="btn btn-danger rounded">

			<input type="radio" name="options" id="option3" autocomplete="off"> Radio

		</label>

  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body>



</html>

If you ever heard about "margins", yes you can.

edited Nov 7 at 5:43

answered Nov 7 at 5:37

Sherif Salah

14417

add a comment |

up vote
-1
down vote

accepted

<!doctype html>

<html lang="en">



<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Bootstrap</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>



<body>

  <div class="btn-group btn-group-toggle" data-toggle="buttons">

    <label class="btn btn-primary rounded mr-1 active">

			<input type="radio" name="options" id="option1" autocomplete="off" checked=""> Active

		</label>

    <label class="btn btn-success rounded mr-1">

			<input type="radio" name="options" id="option2" autocomplete="off"> Radio

		</label>

    <label class="btn btn-danger rounded">

			<input type="radio" name="options" id="option3" autocomplete="off"> Radio

		</label>

  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body>



</html>

If you ever heard about "margins", yes you can.

edited Nov 7 at 5:43

answered Nov 7 at 5:37

Sherif Salah

14417

add a comment |

up vote
-1
down vote

accepted

<!doctype html>

<html lang="en">



<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Bootstrap</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>



<body>

  <div class="btn-group btn-group-toggle" data-toggle="buttons">

    <label class="btn btn-primary rounded mr-1 active">

			<input type="radio" name="options" id="option1" autocomplete="off" checked=""> Active

		</label>

    <label class="btn btn-success rounded mr-1">

			<input type="radio" name="options" id="option2" autocomplete="off"> Radio

		</label>

    <label class="btn btn-danger rounded">

			<input type="radio" name="options" id="option3" autocomplete="off"> Radio

		</label>

  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body>



</html>

If you ever heard about "margins", yes you can.

edited Nov 7 at 5:43

answered Nov 7 at 5:37

Sherif Salah

14417

<!doctype html>

<html lang="en">



<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Bootstrap</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>



<body>

  <div class="btn-group btn-group-toggle" data-toggle="buttons">

    <label class="btn btn-primary rounded mr-1 active">

			<input type="radio" name="options" id="option1" autocomplete="off" checked=""> Active

		</label>

    <label class="btn btn-success rounded mr-1">

			<input type="radio" name="options" id="option2" autocomplete="off"> Radio

		</label>

    <label class="btn btn-danger rounded">

			<input type="radio" name="options" id="option3" autocomplete="off"> Radio

		</label>

  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body>



</html>

If you ever heard about "margins", yes you can.

<!doctype html>

<html lang="en">



<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Bootstrap</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>



<body>

  <div class="btn-group btn-group-toggle" data-toggle="buttons">

    <label class="btn btn-primary rounded mr-1 active">

			<input type="radio" name="options" id="option1" autocomplete="off" checked=""> Active

		</label>

    <label class="btn btn-success rounded mr-1">

			<input type="radio" name="options" id="option2" autocomplete="off"> Radio

		</label>

    <label class="btn btn-danger rounded">

			<input type="radio" name="options" id="option3" autocomplete="off"> Radio

		</label>

  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body>



</html>

<!doctype html>

<html lang="en">



<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Bootstrap</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>



<body>

  <div class="btn-group btn-group-toggle" data-toggle="buttons">

    <label class="btn btn-primary rounded mr-1 active">

			<input type="radio" name="options" id="option1" autocomplete="off" checked=""> Active

		</label>

    <label class="btn btn-success rounded mr-1">

			<input type="radio" name="options" id="option2" autocomplete="off"> Radio

		</label>

    <label class="btn btn-danger rounded">

			<input type="radio" name="options" id="option3" autocomplete="off"> Radio

		</label>

  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body>



</html>

edited Nov 7 at 5:43

answered Nov 7 at 5:37

Sherif Salah

14417

edited Nov 7 at 5:43

answered Nov 7 at 5:37

Sherif Salah

14417

answered Nov 7 at 5:37

Sherif Salah

14417

answered Nov 7 at 5:37

Sherif Salah

14417

add a comment |

up vote
-1
down vote

You're basically asking how to use a component for something that hasn't been built for.

It is advisable to use radio buttons as radio buttons and normal buttons as normal buttons.

answered Nov 7 at 5:39

Adriano

1,17911123

add a comment |

up vote
-1
down vote

You're basically asking how to use a component for something that hasn't been built for.

It is advisable to use radio buttons as radio buttons and normal buttons as normal buttons.

answered Nov 7 at 5:39

Adriano

1,17911123

add a comment |

up vote
-1
down vote

You're basically asking how to use a component for something that hasn't been built for.

It is advisable to use radio buttons as radio buttons and normal buttons as normal buttons.

answered Nov 7 at 5:39

Adriano

1,17911123

You're basically asking how to use a component for something that hasn't been built for.

It is advisable to use radio buttons as radio buttons and normal buttons as normal buttons.

answered Nov 7 at 5:39

Adriano

1,17911123

answered Nov 7 at 5:39

Adriano

1,17911123

answered Nov 7 at 5:39

Adriano

1,17911123

answered Nov 7 at 5:39

Adriano

1,17911123

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Zystkmt