I am using Bootstrap5 and wondering how to align two buttons to the right in the same column as the "Delete" button. Another problem is no matter which "breakpoint" (md, sm) I use it's not possible to right align these two buttons properly. I am wondering what is the bootstrap way of doing it.
Snippet
<form>
<div class="hx-form-group position-relative">
<label for="el62ba8cb87eb84be2bebc9c2970de0552" class="form-label">Goal #1</label><span class="input-group"><input id="el62ba8cb87eb84be2bebc9c2970de0552" type="text" class="form-control" placeholder="Enter goal #1 text here." _bl_6="">
<button type="button" class="hx-button btn btn-danger" _bl_7="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="hx-form-group position-relative">
<label for="el28a7e89fc62249dd80048d65487a2354" class="form-label">Goal #2</label><span class="input-group"><input id="el28a7e89fc62249dd80048d65487a2354" type="text" class="form-control" placeholder="Enter goal #2 text here." _bl_8="">
<button type="button" class="hx-button btn btn-danger" _bl_9="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="hx-form-group position-relative">
<label for="ele59dd34cf9ed4db2a92de894f47b5946" class="form-label">Goal #3</label><span class="input-group"><input id="ele59dd34cf9ed4db2a92de894f47b5946" type="text" class="form-control" placeholder="Enter goal #3 text here." _bl_10="">
<button type="button" class="hx-button btn btn-danger" _bl_11="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="container text-center">
<div class="row justify-content-end">
<div class="col-4">
<button type="button" class="hx-button btn btn-secondary" _bl_4="" disabled="">
New Goal
</button>
</div>
<div class="col-4">
<button type="submit" class="hx-button btn btn-primary">
Save
</button>
</div>
</div>
</div>
</form>
First of all, you don't need to use row and col as a wrapper of buttons as row cols have different purposes so you can do it like this
[https://codepen.io/kukrati/pen/YzaYEXy]
and make sure you have removed its parent .container class
if you don't want to change your existing layout due to some limitations then you just need to replace .col-lg-4 with .col-auto and then remove the parent .container class
Related
I am using the accordion class to display some data in tables. My code loops through all the table rows and assigns them to an accordion dropdown. My problem is when I select one accordion header they all expand/collapse instead of just the one I clicked on.
<div class="accordion" id="qc_inspection">
<div class="accordion-item">
<h1 class="accordion-header">
<button class="accordion-button d-block text-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h1 class="display-6">{{table['inspection']}}</h1>
</button>
</h1>
<div id="collapseOne" class="accordion-collapse">
<div class="accordion-body">
<input type="text" placeholder="Weight" class="form-control"
value="{{ request.form['weight'] }}"></input>
{{table['min']}} to {{table['max']}} grams
</div>
</div>
</div>
</div>
Code works fine if I create each collapsible row independently and take the for loop out, but the number of rows changes depending on the table selected so that will not work.
assigning a unique value to data-bs-target and the accordion body id worked. it does not like just numeric values so I added "a" in front of the value. See working code below:
<div class="accordion">
<div class="accordion-item">
<h1 class="accordion-header">
<button class="accordion-button d-block text-center" type="button" data-bs-toggle="collapse" data-bs-target="#a{{table['id']}}" aria-expanded="false" aria-controls="collapseOne">
<h1 class="display-6">{{table['inspection']}}</h1>
</button>
</h1>
<div id="a{{table['id']}}" class="accordion-collapse">
<div class="accordion-body">
<input type="text" placeholder="Weight" class="form-control"
value="{{ request.form['weight'] }}"></input>
{{table['min']}} to {{table['max']}} grams
</div>
</div>
</div>
</div>
In my Rails app I'd like to use a Bootstrap button group. There is a single field, and each button represents a different state .. ie like radio buttons.
Even better if I can do it with simple_form but can't find a solution by Googling.
<%= simple_form_for #user_word, url: user_words_path, remote: true, wrapper: :inline_form, html: { class: 'form-inline' } do |f| %>
<div class="row">
<div class="col-sm-12">
<div id="selector" class="btn-group btn-group-sm" >
<button class="btn level-unknown" id='unknown' type="button">Unknown</button>
<button class="btn level-low" id='low' type="button">Low</button>
<button class="btn level-medium active" id='medium' type="button">Medium</button>
<button class="btn level-high" id='high' type="button">High</button>
<button class="btn level-known" id='known' type="button">Known</button>
</div>
</div>
</div>
<% end %>
Not sure exactly what you're asking. If your issue is that the active class is not switching to your clicked button, it's because you need javascript to do so.
$('#selector button').on('click',
function(e){
var $obj=$(e.target);
$('#selector .active').removeClass('active'); //remove active class from buttons
$obj.addClass('active'); //add active class to clicked button
});
See a working example here https://jsfiddle.net/DTcHh/14519/
Edit:
I just learned that this functionality is built in to the bootstrap javascript library. Your markup just needs to be modified to match this syntax
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
See example at http://getbootstrap.com/javascript/#buttons-checkbox-radio
I am trying to insert a Label, Search bar, Button group in a Panel Heading.
I have the following code
<div class="panel panel-default">
<div class="panel-heading">
<span class="label label-default">
<%= yield(:title) %>
</span>
<div class="btn-group pull-right" role="group" >
<button type="button" class="btn btn-default">
<% if can? :create, Client %>
<%= link_to 'New', new_client_path %>
<% end %>
</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="input-group col-lg-3 pull-right">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
<button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button>
</div>
</div>
</div>
<div id="clients"><%= render 'clients' %></div>
<p class="small"><%= will_paginate #clients %></p>
</div>
As of now it works, but search bar and button group have no space between them. I would like to have ateast 5px space between them so like this:
-----------------------------------------------------------------
Label Search -space- btn group
-----------------------------------------------------------------
How to achieve this?
I am using Rails 4 with Sass
To answer the question better we would need to know what CSS you are using. Guessing I suggest adding a DIV around your search input and add a class with a display: inline-block and then add a right padding.
<div class="mycustclass">
<input type="text" class="form-control" placeholder="Search">
</div>
.mycustclass {
display: inline-block;
padding-right: 5px;
}
You would also need your .input-group-btn class to use a display:inline-block as well.
If that doesn't work there are plenty of other options.
Just write margin-right:5px in first btn-primary inline than it will be work
not write padding-right
<div class="input-group-btn">
<button class="btn btn-primary" style="margin-right:5px;"><i class="glyphicon glyphicon-search"></i></button>
<button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button>
</div>
I am using Twitter's Bootstrap 3, the one that produces the pretty blue buttons. I would like to, using either rails form_for or simple_form, produce a radio_button group that looks the same as the following html one does:
<div class= "form-group">
<div class= "btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="ptype", id="freelancer">
Freelancer
</label>
<label class="btn btn-primary">
<input type="radio" name= "ptype" id="agency">
Agency
</label>
</div>
</div>
That is, I would like the radio button group to look like the bottom option in the image below, rather than the top.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Freelancer
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Agency
</label>
</div>
You will need the specific javascript for this to work.
http://getbootstrap.com/javascript/#buttons
that's how I fixed it, the rails way:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<%= radio_button_tag :flight_id, flight.id %>select
</label>
</div>
As you can see, the form seems to create new lines before and after itself. I am using Twitter Bootstrap, so I tried .form-inline but it didn't work either. Is there a way to keep the form inline with other elements?
Below is JSFiddle to the source code written below it. It doesn't show much, but the behavior of the form is shown.
http://jsfiddle.net/UHNtA/
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="login-widget pull-right">
<button id="login-toggle" type="button" class="btn btn-primary"><i class="icon-white icon-chevron-left"></i>Log in</button>
<form id="login" class="navbar-form form-inline" method="post" action="<?php echo $_SERVER['PHP_SELF']?>">
<input type="text" class="span2" placeholder="Username" name="username">
<input type="password" class="span2" placeholder="Password" name="password">
<button type="submit" class="btn btn-primary" name="submit">Log in</button>
</form>
<button type="button" class="btn btn-primary" onclick="location.href='<?php echo $_SERVER['PHP_SELF'].'/register.php'?>'">Register</button>
</div>
</div>
</div>
You need to change your login form to display: inline:
#login {
display: inline;
}
See updated jsfiddle: http://jsfiddle.net/UHNtA/1/
the reason why its been creating lines before and after your from, you've put them outside your form, you need to include your login and register inside your <form> tag
see this fiddle: http://jsfiddle.net/2nY89/54/