I have a form that looks like the following:
<div class="row">
<div class="col">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="col">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
I'm using Bootstrap 4. The thing is, I want this form to be the max width of its container - to have the textarea stretch and the buttons be a static width. If I use the above, I get a big empty gap because the smallest col (col-1) is to wide for the buttons. How can I have it fill the width of the screen with the button columns remaining a fixed width?
I have a feeling its using flex and d-flex but I cant manage to get it work.
add flex-grow-0 to buttons column:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
<div class="row">
<div class="col">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="col flex-grow-0">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
</div>
You can remove .col and use d-flex and flex-grow-1.
Then, you can also add a margin-left using ml-3 to the buttons.
<div class="row mw-100">
<div class="d-flex flex-grow-1">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="ml-3">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
For the buttons container, you can set the width you want.
Related
I am creating a Template HTML CSS page for a To-Do Application and I am using Grid Layout; Container-Fluid with Rows and Columns. I have spaced a Button, some Text, and further 2 Buttons as follows:
<div class="container-fluid">
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="flex-heading">
<i
class="fas fa-clipboard-list fa-4x icon-backgroundcolor addmain-icon"
></i>
<p class="subhead">ADD ITEM</p>
</div>
<hr />
<div class="row within">
<div class="col-6">
<label class="add_line"
>What do you want to do?</label
>
</div>
</div>
<div class="row within">
<div class="col-8">
<div class="md-form form-group">
<input
type="text"
class="form-control"
name = "description"
[(ngModel)] = "description"
placeholder="I want to do something good"
(keydown.enter)="onKeydown($event, content)"
/>
</div>
</div>
<div class="col-4">
<button
type="button"
class="btn btn-flat add-button"
(click)="open(content)"
>
<i
class="fas fa-plus-circle fa-2x add-icon"
></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-3"></div>
</div>
</div>
There are Gutters between each Column and the text goes to the next line. What can be a good way to decrease gutter space and let the text space out?
I need to center horizontally a set of buttons into div.
My problem is that the buttons continues left aligned.
//css
.space-btn{
margin-bottom:5px!important;
}
here is my markup:
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="text-center">
<div class="btn-toolbar">
<button class="btn btn-primary space-btn" type="button">Histórico</button>
<button class="btn btn-primary space-btn" type="button">Reagendar</button>
<button class="btn btn-primary space-btn" type="button">Detalhes</button>
</div>
</div>
</div>
</div>
</div>
</div>
The issue is that btn in bootstrap used inside btn-toolbar are floated
so you may add this code :
.space-btn {
float: none!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar text-center">
<button class="btn btn-primary space-btn" type="button">Histórico</button>
<button class="btn btn-primary space-btn" type="button">Reagendar</button>
<button class="btn btn-primary space-btn" type="button">Detalhes</button>
</div>
</div>
</div>
</div>
</div>
There is no big issue in code you have to change position of text-center class. this will come like this.
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar text-center">
<button class="btn btn-primary space-btn" type="button">Histórico</button>
<button class="btn btn-primary space-btn" type="button">Reagendar</button>
<button class="btn btn-primary space-btn" type="button">Detalhes</button>
</div>
</div>
</div>
</div>
</div>
There is a small change also in css which is
.space-btn{
float:none!important;
}
Add text-center class to the button container.
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar text-center">
<button class="btn btn-primary space-btn" type="button">Histórico</button>
<button class="btn btn-primary space-btn" type="button">Reagendar</button>
<button class="btn btn-primary space-btn" type="button">Detalhes</button>
</div>
</div>
</div>
</div>
</div>
I am developing a web application and would like my EntreCadastre-se|Carrinho menu to be next to the text field, but it is getting underneath
<div class="row">
<div class="col-6 col-md-4 col-xs-4">
<img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal">
</div>
<div class="col-6 col-md-4">
<div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div>
</div>
<div class="col-6 col-md-4">
<ul class="menu_2">
<div class="btn-group" role="group">
<div class="btn-group" role="group">
Entre/Cadastre-se <span class="caret"></span>
</div>
<button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
</div>
</ul>
</div>
</div>
What you are doing wrong here is your math. Like #efkin said you have only 12 columns. But you have defined three divs with col-6. That means 3*6 = 18.
When you want 3 columns with equal size on one row you have to use col-4 for each, because 3*4 = 12.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4 col-md-4 col-xs-4">
<img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal" >
</div>
<div class="col-4 col-md-4">
<div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div>
</div>
<div class="col-4 col-md-4">
<ul class="menu_2">
<div class="btn-group" role="group">
<div class="btn-group" role="group">
Entre/Cadastre-se <span class="caret"></span>
</div>
<button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
</div>
</ul>
</div>
</div>
I have a group of buttons group:
<div class="row">
<div class="col-md-2">
<div class="btn-group-vertical btn-group-justified" role="group" id="nav_bar">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="row">
<a class="btn btn-primary" data-toggle="collapse" href="#Setup1" data-parent="#accordion">Setup1</a>
<div id="Setup1" class="panel-collapse collapse">
<div class="col-md-12">
<div class="btn-group-vertical btn-group-justified" role="group">
<div class="row">
<button type="button" class="btn btn-default">MAIN</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">EXEC</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">ROUTER</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<a class="btn btn-primary" data-toggle="collapse" href="#Setup2" data-parent="#accordion">Setup2</a>
<div id="Setup2" class="panel-collapse collapse">
<div class="col-md-12">
<div class="btn-group-vertical btn-group-justified" role="group">
<div class="row">
<button type="button" class="btn btn-default">MAIN</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">EXEC</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">ROUTER</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and in output this is:
but I cant figure out, how to make collapse one group, when you expand other. Could someone help with that?
I was trying to play with panels, but it's unsuitable, because i need a style, which showed on attached image. And in panels only text is clickable.
Thanks
You can do it by setting up your elements with bootstrap properly.
But you can also extend the collapse by:
$('.btn').on('click',function(){
$('.panel-collapse').each(function(){
$(this).removeClass('in');
}):
});
I have the following markup, which should result in the input being stacked above the row of icons. Alas, they each take up half the width of the footer. I've spent way too much time trying to find the culprit CSS related to the footer, but have come up short.
<div class="bar bar-footer bar-balanced auto-height">
<div class="row">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Email" />
</label>
</div>
</div>
<div class="row">
<div class="col text-center">
<button class="button button-icon icon ion-social-twitter"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-facebook"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-linkedin-outline"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-googleplus"></button>
</div>
</div>
</div>
Demo
I'd be interested in either a fix for what appears to be a bug in Ionic's grid, or an override solution to make the rows behave. Thanks a bunch.
Separate the input's div and the buttons' div, then give the input's div the class bar-subfooter instead of bar-footer, and give the buttons' div the classes bar bar-footer:
<div class="bar bar-subfooter bar-balanced auto-height">
<div class="row">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Email" />
</label>
</div>
</div>
</div>
<div class="bar bar-footer row">
<div class="col text-center">
<button class="button button-icon icon ion-social-twitter"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-facebook"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-linkedin-outline"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-googleplus"></button>
</div>
</div>