How to make responsive button group with label in same row

bootstrap button group spacing
button group css
bootstrap buttons
bootstrap button group-toggle
btn-group-justified bootstrap 4
button group bootstrap
bootstrap button group selected
bootstrap buttons with icons

I have a form which includes list of elements.It should be responsive and should be fit for all those screens.When I run that project,everthing looks good on big screen but when I make it smaller,that language label and its buttons getting seperated in such a bad way as you can see on the picture.How can I make it always together and in the same row?I want it to be seem as in the first image for big screens.


Besides if I make that language text h4(like the other titles),that language label and those buttons became as bad as small size.Also I want that language label as h4.Here what I tried below

 <div class=" container shadow p-3 mb-5 bg-white rounded" style="margin-top:50px;">
      <form class="form1" (ngSubmit)="onSubmit(f)" style="margin-top:10px;">
    <div class="row" style="margin-left:10px;">
      <div class="col-sm-6">
        <ul class="list-unstyled">
            <div class="example-button-row">
                <strong style="font-size:22px;">Language</strong>
                <button style="margin-left:10px;" mat-stroked-button>English</button>
                <button mat-stroked-button>German</button>
              <h4 for="">Server Size</h4>


You could try to experiment with the x-overflow css-attribute of your divs, but that would defeat the purpose of using bootstaps responsive grid. The idea behind responsive design, is not to make it look exactly the same on all sreensizes but to see if you can come up with ways to make the best of every individual size.

Button group · Bootstrap, Group a series of buttons together on a single line with the button group, and <​div class="btn-group" role="group" aria-label="Basic example"> <button For button groups, this would be role="group" , while toolbars should have a role="​toolbar" . just add .btn-group-* to each .btn-group , including each one when nesting  Learn how to create a responsive inline form with CSS. Responsive Inline Form Resize the browser window to see the effect (the labels and inputs will stack on top of each other instead of next to each other on smaller screens):

You can try the following code:


<div class="row">
  <div class="col-sm-8">
    <div class="form-group">
      <label class="control-label sr-only" for="input_2">Input 2</label>
      <div class="btn-group" data-toggle="buttons" id="left">
        <label class="btn btn-default active">
          <input type="radio" name="options" id="option1" checked>Opt1</label>
        <label class="btn btn-default">
          <input type="radio" name="options" id="option2">Opt2</label>


#left {
    float: left;
    margin-right: 10px;
#right {
    overflow: hidden

How to center .btn-group from twitter-bootstrap?, Vertical Button Group Sticky Social Bar Pill Navigation Responsive Header Learn how to create a responsive inline form with CSS. Resize the browser window to see the effect (the labels and inputs will stack on top <input type="​checkbox" name="remember"> Remember me </label> <button flex-flow: row wrap; Horizontal Button Groups. Group a series of buttons together on a single line in a button group:

I guess you can utilize d-flex on li and add margin-right to your strong or h4 tag. This works fine even if you are in 320px resolution. Hope it helps Responsive at 320px

Just added this minor change

<li class="d-flex">
        <div class="example-button-row">
            <strong style="font-size:22px; margin-right:20px">Language</strong>
            <button mat-stroked-button>English</button>
            <button mat-stroked-button>German</button>

How To Create a Responsive Inline Form With CSS, Bootstrap allows you to group a series of buttons together (on a single line) in a button Use a <div> element with class .btn-group to create a button group:  Bootstrap Tutorial - Align label and control in same line. Back to Form ↑ The following code shows how to align label and control in same line.

Bootstrap Button Groups, Bootstrap button groups are buttons grouped together in a single line with no space Editable · Editor · Generator · Pagination · Responsive · Scroll · Search · Sort In the examples provided here, we use aria-label , but alternatives such as in a group, just add .btn-group-* to each .btn-group , including each one when​  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

Bootstrap Button Group, Editable · Editor · Generator · Pagination · Responsive · Scroll · Search · Sort A 'radio button' is a component used to allow a user to make a single choice class="form-check-label" for="materialChecked">Material checked</label> </div> Group default radio buttons or checkboxes on the same horizontal row by  In this article, I’ll teach you how to use CSS Grid to create a super cool image grid which varies the number of columns with the width of the screen. And the most beautiful part: the responsiveness will be added with a single line of CSS. This means we don’t have to clutter up the HTML with ugly class names (i.e. col-sm-4, col-md-8) or create media queries for every single screen size. If

Bootstrap Radio Button, Grouping inputs and labels or buttons is also part of this module and, as always, You can also use the same column classes to make them responsive for  I am creating a registration form for a website. I want each label and its corresponding input element to appear on the same line. Here's my code: #form { background-color: #FFF; height: