My Code:
<div class="d-grid gap-2 d-md-block mt-1">
<button class="btn btn-secondary" id="btnSearch"><i class="fa fa-search fa-fw"></i>Search</button>
<button class="btn btn-primary ml-1" id="btnReset"><i class="fa fa-retweet fa-fw"></i>Reset</button>
<button class="btn btn-outline-success ml-1" id="btnExport"><i class="fas fa-file-export"></i>Export List</button>
<select class="form-select" aria-label="Download Format">
<option selected>Please select format</option>
<option value="1">Excel</option>
<option value="2">PDF</option>
</select>
</div>
Before adding the select element, the three buttons will keep inline and will look perfect. However, when I add the select element, this element will auto-put into the next line which makes the select width too long
How do I put these four elements together in one line and shorten the selected element like this?
[Search] [Reset] [Export] [Please select format ]
The element will not have a form tag at parent.
Thank you
.form-select has css display:block;width:100%, so select will always be wrapped to next line.
This will work
<select class="form-select d-inline-block w-auto" style="vertical-align:middle"...
Or
<select class="form-select d-inline-block w-auto btn-group-vertical"...
Related
I am trying to align the button which is present outside the form in the same line of the form. The form and both buttons should be responsive and properly aligned on reducing the screen size. I am sharing snippet. Please provide some suggestions.
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"/>
<body>
<form class="form-inline">
<div class="form-group">
<select id="cato" class="form-control" >
<option disabled selected="true">-Select Category-</option>
<option>Good</option>
<option>Bad</option>
</select>
</div>
<div class="form-group">
<select id="subo" class="form-control">
<option disabled selected="true">-Select Subcategory-</option>
<option>Good</option>
<option>Bad</option>
</select>
</div>
<button type="submit" onclick="resettable()" class="btn btn-primary"><i class="fa fa-arrow-circle-o-up" aria-hidden="true" ></i> Reset</button>
</form>
<button type="submit" class="btn btn-primary m-2" data-toggle="modal" data-target="#modaledit"><i class="fa fa-plus" aria-hidden="true" ></i> Add Product</button>
</body>
Try to add some margin in all elements inside the form like the following
div.form-inline * {
margin: 2px;
}
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<body>
<div class="form-inline">
<form class="form-inline">
<div class="form-group">
<select id="cato" class="form-control">
<option disabled selected="true">-Select Category-</option>
<option>Good</option>
<option>Bad</option>
</select>
</div>
<div class="form-group">
<select id="subo" class="form-control">
<option disabled selected="true">-Select Subcategory-</option>
<option>Good</option>
<option>Bad</option>
</select>
</div>
<button type="submit" onclick="resettable()" class="btn btn-primary mt-1"><i class="fa fa-arrow-circle-o-up" aria-hidden="true" ></i> Reset</button>
</form>
<button type="submit" class="btn btn-primary mt-1" data-toggle="modal" data-target="#modaledit"><i class="fa fa-plus" aria-hidden="true" ></i> Add Product</button>
</div>
add d-inline-flex to the form:
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<div>
<form class="form-inline d-inline-flex mt-2 ml-2 align-items-start">
<div class="form-groups">
<select id="cato" class="form-control">
<option disabled selected="true">-Select Category-</option>
<option>Good</option>
<option>Bad</option>
</select>
</div>
<div class="form-group">
<select id="subo" class="form-control">
<option disabled selected="true">-Select Subcategory-</option>
<option>Good</option>
<option>Bad</option>
</select>
</div>
<button type="submit" onclick="resettable()" class="btn btn-primary"><i class="fa fa-arrow-circle-o-up" aria-hidden="true" ></i> Reset</button>
</form>
<button type="submit" class="btn btn-primary align-top m-2" data-toggle="modal" data-target="#modaledit"><i class="fa fa-plus" aria-hidden="true" ></i> Add Product</button>
</div>
Since you are trying to keep them together, you can consider them "sibling" elements. So you can put them both in a div and style that div to get your desired sizing.
Also, I just changed the m-2 class on your submit button to mx-0 my-2 to basically give it no margin on x-axis, and the same margin as before on y-axis.
Edit: Updated to fix vertical misalignment on small screen sizes
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<body>
<div class="container">
<form class="form-inline">
<div class="form-group m-0">
<select id="cato" class="form-control">
<option disabled selected="true">-Select Category-</option>
<option>Good</option>
<option>Bad</option>
</select>
</div>
<div class="form-group m-0">
<select id="subo" class="form-control">
<option disabled selected="true">-Select Subcategory-</option>
<option>Good</option>
<option>Bad</option>
</select>
</div>
<button type="submit" onclick="resettable()" class="btn btn-primary m-0"><i class="fa fa-arrow-circle-o-up" aria-hidden="true" ></i> Reset</button>
</form>
<button type="submit" class="btn btn-primary mx-0 my-2" data-toggle="modal" data-target="#modaledit"><i class="fa fa-plus" aria-hidden="true" ></i> Add Product</button>
</div>
</body>
However, there's some noticeable issues with your form here:
Your "reset" button is set to type submit, meaning this would submit the form unless you are capturing it and preventing propagation.
Your real submit button is outside the form. I'm not sure if that works, and it doesn't seem like good practice even if it does. If all you want is to space out your submit button differently, consider adding <br> tags or using bootstrap classes.
You can add parent to your form. Add display:inline-block and width:fit-content and the outside button will be aligned with form
I am new to bootsrtap-4 I am designing one page in HTML using bootstrap-4, But facing some issue while to make it responsive it should work in e.g, Laptop-L,Laptop-M and i-padd, while design it, its working in only for Laptop-L not M size and i-padd, can someone see me code and tell me what should i do to design this page.
Here is my code:
<div className="row">
<div className="col-md-10">
<div className="row">
<div className="col-md-4">
<div className="fontStyle">
<span className="">1</span>
<!-- <div className="displayBlk"> -->
<label type="text">Select Technology</label>
<select value="" className="selectpicker btn btn-labeled btn-start">
<option value="">None Selected</option>
<option value="">Hello </option>
<option value="">World </option>
</select>
<!-- </div> -->
</div>
</div>
<div className="col-md-4 rowOne">
<div className="fontStyle">
Select Question Type
<button type="button" class="btn btn-primary btn-sm">Code Type</button>
<button type="button" class="btn btn-default btn-sm">Non Code Type</button>
</div>
</div>
<div className="col-md-4">
<div className="fontStyle">
Number Of Questions
<select value="" onChange="" className="selectpicker btn btn-labeled btn-start">
<option value="">Select</option>
<option value="">01</option>
<option value="">02</option>
</select>
</div>
</div>
</div>
<!-- end of 10 col row -->
</div>
<div className="col-md-2">
<span className="">
<button type="button" class="btn btn-outline-primary btn-sm">Reset</button>
</span>
<span>
<button type="button" class="btn btn-primary btn-sm">+</button>
</span>
</div>
</div>
<!-- end of main row -->
First Screen where its showing in L-Size Screen:
first screen output
Second screen where its showing in M-size screen:
second screen output
What I am looking for actual output:
actual output
can someone please guide me how can i achieve this design.
Thanks for any help!
I would consider making it a table. Since it is looking like that from your pictures. Also, I would suggest not to put multiple elements into a Grid Formation.
Let me give you an example. In your sample code you have:
<div className="col-md-2">
<span className="">
<button type="button" class="btn btn-outline-primary bt-sm">Reset</button>
</span>
<span>
<button type="button" class="btn btn-primary btn-sm">+</button>
</span>
</div>
I would suggest making it like so:
<div class="col-md">
<span className="">
<button type="button" class="btn btn-outline-primary bt-sm">Reset</button>
</span>
</div>
<div class="col-md">
<span className="">
<button type="button" class="btn btn-primary btn-sm">+</button>
</span>
</div>
Make the elements as responsive as possible in their own mini world, if you like. Thing, as you show, get especially bad when you have buttons and text which are probably on a different z-axis.
The same principle applies for all your code.
This is probably a very basic question, but I want to put a button next to a dropdown list.
I would like to do it without altering the CSS. I've been trying for a long time and cannot manage to get it right, I know there's a simple way to do it but I'm stumped
code:
<div class="col-md-4">
<div class="form-group">
<label for="Grupo">TI's</label>
<select class="form-control" id="TIDropDown"></select>
<button type="button" class="btn btn-default ">
<span class="glyphicon glyphicon-align-left"></span>
</button>
</div>
</div>
and this is what it displays:
I would like for the button to appear next to it, as to add more dropdowns dynamically.
Thanks.
If you're using Bootstrap
You could use Input Group like this...
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4">
<div class="input-group">
<select class="custom-select" id="TIDropDown">
<option>Choose...</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">
<span class="glyphicon glyphicon-align-left"></span>
</button>
</div>
</div>
</div>
You can add a class "row" to your group.
Then you can divide the spaces.
<div class="col-md-4">
<label for="Grupo">TI's</label>
<div class="form-group row">
<div class="col-md-10">
<select class="form-control" id="TIDropDown"></select>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default ">
<span class="glyphicon glyphicon-align-left"></span>
</button>
</div>
</div>
</div>
I have been struggling because I have this form that has different inputs on sub divs. Whenever I put the opening form tag before the first input, the line breaks. If I put it after it, it will stay fine. I have tried adding:
display:inline
to different classes, but it doesn't seem to do the trick.
Here is the fiddle: https://jsfiddle.net/tL50dhcu/
Can anyone help me keep it in line?
.form-horizontal {
display: flex;
flex-flow: row nowrap;
}
if you make the container of the form flex , and set it to nowrap
EDIT: Here is a more succinct way to do what you are trying to do: http://codepen.io/dcain19/pen/xVVyao
Try the example below. Notice how the search input was put inside the input-group-btn class. Now, you will have to change your border-radius on the button to make the right borders rounded, but that should get you what you need.
<form method="post" class="form-horizontal" role="form" action="{% url 'search' %}">
<div class="input-group-btn">
<div class="btn-group" role="group">
<input type="text" class="form-control" id="searchInput" placeholder="Search" name="search" required />
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<div class="form-group">
<label for="filter">Industry</label>
<select class="form-control" id="searchIndustry" name="industry">
<option value="any">Any</option>
</select>
</div>
<div class="form-group">
<label for="filter">Country</label>
<select class="form-control" id="searchCountry" name="country">
<option value="any">Any</option>
</select>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
What is the best way to horizontally space Bootstrap buttons?
At the moment the buttons are touching:
<div class="btn-group">
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<i class="icon-in-button"></i>
Add to list
<span class="caret"/>
</button>
<ul class="dropdown-menu">
<li>
here
</li>
<li>
new
</li>
</ul>
<button class="btn btn-info">
<i class="icon-in-button"></i>
more
</button>
</div>
jsfiddle showing the problem: http://jsfiddle.net/hhimanshu/sYLRq/4/
Put them inside btn-toolbar or some other container, not btn-group. btn-group joins them together. More info on Bootstrap documentation.
Edit: The original question was for Bootstrap 2.x, but the same is still valid for Bootstrap 3 and Bootstrap 4.
In Bootstrap 4 you will need to add appropriate margin to your groups using utility classes, such as mx-2.
Just put the buttons in a class ( class="btn-toolbar" ) as told by bro Miroslav Popovic.It works awesome.
<div class="btn-toolbar">
<button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
<button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>
You can use spacing for Bootstrap and no need for any additional CSS. Just add the classes to your buttons. This is for version 4.
What Dragan B suggested is right way to go for Bootstrap 4. I have put one example below. e.g. mr-3 is margin-right:1rem!important
<div class="btn-toolbar pull-right">
<button type="button" class="btn mr-3">btn1</button>
<button type="button" class="btn mr-3">btn2</button>
<button type="button" class="btn">btn3</button>
</div>
p.s: in my case I wanted my buttons to be displayed to the right of the screen and hence pull-right.
you should use bootstrap v.4
<div class="form-group row">
<div class="col-md-6">
<input type="button" class="btn form-control" id="btn1">
</div>
<div class="col-md-6">
<input type="button" class="btn form-control" id="btn2">
</div>
</div>
The easiest way in most situations is margin.
Where you can do :
button{
margin: 13px 12px 12px 10px;
}
OR
button{
margin: 13px;
}
Dragan B. solution is correct. In my case I needed the buttons to be spaced vertically when stacking so I added the mb-2 property to them.
<div class="btn-toolbar">
<button type="button" class="btn btn-primary mr-2 mb-2">First</button>
<button type="button" class="btn btn-primary mr-2 mb-2">Second</button>
<button type="button" class="btn btn-primary mr-2 mb-2">Third</button>
</div>
Here's another approach based on the documentation.
<div class="d-grid gap-2 d-md-flex" >
<button type="button" class="btn btn-outline-primary btn-sm">button1</button>
<button type="button" class="btn btn-outline-primary btn-sm">button2</button>
</div>
I used the Bootstrap 4 buttons plugin (https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin)
and added the class rounded to the labels and the class mx-1 to the middle button to achieve the desired look and feel of separate radio buttons. Using the class btn-toolbar made the radio button circles appear for me which is not what I wanted. Hope this helps someone.
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active rounded">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary rounded mx-1">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary rounded">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
Another way to achieve this is to add a class .btn-space in your buttons
<button type="button" class="btn btn-outline-danger btn-space"
</button>
<button type="button" class="btn btn-outline-primary btn-space"
</button>
and define this class as follows
.btn-space {
margin-right: 15px;
}
I actual ran into the same requirement. I simply used CSS override like this
.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }
if use Bootstrap, you can change with style like: If you want only in one page, then betwen head tags add .btn-group btn{margin-right:1rem;}
If is for all the web site add to css file
You could also just put the two buttons in a flexbox and set the gap with css
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" rel="stylesheet">
<script crossorigin="anonymous"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="d-flex flex-row" style="gap:5px;">
<button type="button" class="btn btn-primary">Add to list</button>
<button type="button" class="btn btn-secondary">more</button>
</div>
I ended up doing something similar to what mark dibe did, but I needed to figure out the spacing for a slightly different manner.
The col-x classes in bootstrap can be an absolute lifesaver. I ended up doing something similar to this:
<div class="row col-12">
<div class="col-3">Title</div>
</div>
<div class="row col-12">
<div class="col-3">Bootstrap Switch</div>
<div>
This allowed me to align titles and input switches in a nicely spaced manner. The same idea can be applied to the buttons and allow you to stop the buttons from touching.
(Side note: I wanted this to be a comment on the above link, but my reputation is not high enough)