I've started to explore Bootstrap 4 and HTML5/CSS in general. I want to create a text area with two buttons on the side (centered horizontally to each other) :
The code I got is the following:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container mt-2">
<div class="row">
<div class="col-10">
<textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
</div>
<div class="col-2">
<div class="row">
<button class="btn btn-success btn-sm m-1" type="button">Send</button>
</div>
<div class="row">
<button class="btn btn-info btn-sm m-1" type="button">Clear</button>
</div>
</div>
</div>
</div>
I've created a row with 2 columns in it. The second column contains two rows.
Is that correct way to go?
Thanks
A better way of doing it with justify-content-around d-flex flex-column on the buttons column. There was no need of additional row element in the col-2 div.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container mt-2">
<div class="row">
<div class="col-10">
<textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
</div>
<div class="col-2 justify-content-around d-flex flex-column">
<div>
<button class="btn btn-success btn-sm" type="button">Send</button>
</div>
<div>
<button class="btn btn-info btn-sm" type="button">Clear</button>
</div>
</div>
</div>
I think this method is way better. (:
Use col for the textarea column so that it takes all the available space.
Use col-auto for the buttons column so that it takes as much as space as it needs. And then use d-flex flex-column to change its direction.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container mt-2">
<div class="row">
<div class="col">
<textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
</div>
<div class="col-auto d-flex flex-column">
<button class="btn btn-success btn-sm m-1" type="button">Send</button>
<button class="btn btn-info btn-sm m-1" type="button">Clear</button>
</div>
</div>
</div>
You should place each button in a div with 'col-...' class.
Bootstrap documentation about nesting elements in a row
Codepen with your example to show you the difference when you use 'col-...' class.
Codepen
<div class="container mt-2">
<div class="row">
<div class="col-10">
<textarea class="form-control" rows="3" id="sent_text"
placeholder="Just write some text.."></textarea>
</div>
<div class="col-2">
<div class="row">
<button class="btn btn-info btn-sm m-1" type="button">Clear</button>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-success btn-sm m-1" type="button">Send in col</button>
</div>
</div>
<div class="row">
<div class="offset-6 col-6">
<button class="btn btn-success btn-sm m-1" type="button">Send centered using col</button>
</div>
</div>
</div>
Also making the textarea none-reziable is good.Thus
Try this
textarea.form-control{
resize: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container mt-2">
<div class="row">
<div class="col-10">
<textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
</div>
<div class="col-2">
<div class="row">
<div class="d-flex flex-column">
<button class="btn btn-success btn-sm m-1" type="button">Send</button>
<button class="btn btn-info btn-sm m-1" type="button">Clear</button>
</div>
</div>
</div>
</div>
</div>
Related
I have not been able to keep a form-row set of buttons in line when associating labels with buttons. The behavior of a button assigned to a column width, such as col-3 is different than the behavior of a button assigned with an automatic width, col-auto.
The goal is to have all buttons vertically aligned with a text label above the button. The text label should follow the button's position as the viewport size changes. I've tried using .align-self-baseline which does not seem to have an effect.
If I add a blank label above the button with an autosized column it places the text to the left of the button instead of above it. The labels need to appear above the buttons as the target application is displaying on a mobile device with limited display port width. Here are snippets of both:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<form action="#">
<div class="form-row">
<div class="col-4 text-center">
<label>Desired</label>
<button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Button Name</button>
</div>
<div class="col-auto text-center">
<label>undesired</label>
<button type="submit" class="btn btn-sm btn-outline-primary active" aria-pressed="true">Button 2</button>
</div>
</div> <!-- row -->
<div class="form-row mt-4">
<div class="col-4 text-center">
<label>Desired</label>
<button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Row 2 Button</button>
</div>
<div class="col-auto text-center">
<button type="submit" class="btn btn-sm btn-outline-primary align-self-baseline active" aria-pressed="true">Not aligned with Row 2 Button</button>
</div>
</div> <!-- row -->
</form>
</div>
The key is in the btn-block class - it gives display:block property to the buttons inside the div with col-4 class - if you remove it, the alignment will be similar
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<form action="#">
<div class="form-row">
<div class="col-4 text-center">
<label>Desired</label>
<button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Button Name</button>
</div>
<div class="col-auto text-center">
<label>undesired</label>
<button type="submit" class="btn btn-sm btn-block btn-outline-primary active" aria-pressed="true">Button 2</button>
</div>
</div> <!-- row -->
<div class="form-row mt-4">
<div class="col-4 text-center">
<label>Desired</label>
<button type="submit" class="btn btn-sm btn-outline-primary btn-block active btn-block" aria-pressed="true">Row 2 Button</button>
</div>
<div class="col-auto text-center d-flex">
<button type="submit" class="btn btn-sm btn-outline-primary align-self-end active" aria-pressed="true">Not aligned with Row 2 Button</button>
</div>
</div> <!-- row -->
</form>
</div>
For some reason, my first button has a space before it and I can't get rid of it.
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-3">
<button #onclick="ShowModal" class="btn btn-primary"><i class="oi oi-plus"></i>New Member</button>
</div>
<div class="col-xs-4 col-md-3" style="margin:auto">
<button #onclick="#RefreshData" class="btn btn-primary"><i class="oi oi-loop-circular"></i> Refresh Data</button>
</div>
<div class="input-group col-xs-4 col-md-4 offset-md-5">
<input type="text" class="form-control" placeholder="Search Members" #bind="#searchTerm" />
<div class="input-group-append">
<button #onclick="#SearchMember" class="btn btn-primary"><i class="oi oi-magnifying-glass"></i></button>
</div>
</div>
</div>
This how it looks
This forces the search to go on the next row. How can I fix this?
It's a problem with margins; just make sure you get rid of the left margin. If you're ever in doubt about what a space is, take a peek at the element in dev tools and it'll normally help you out.
div.container {
margin-left: 0px
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-3">
<button #onclick="ShowModal" class="btn btn-primary"><i class="oi oi-plus"></i>New Member</button>
</div>
<div class="col-xs-4 col-md-3" style="margin:auto">
<button #onclick="#RefreshData" class="btn btn-primary"><i class="oi oi-loop-circular"></i> Refresh Data</button>
</div>
<div class="input-group col-xs-4 col-md-4 offset-md-5">
<input type="text" class="form-control" placeholder="Search Members" #bind="#searchTerm" />
<div class="input-group-append">
<button #onclick="#SearchMember" class="btn btn-primary"><i class="oi oi-magnifying-glass"></i></button>
</div>
</div>
</div>
I used the following code to output the interface as shown below.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12">
<div class="card m-b-30">
<div class="card-header container-fluid">
<div class="row">
<h2 class="card-title">Customer Profile Types</h2>
<div class="col-md-4 float-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
</div>
<br>
<div class="CustomerProfileTypes-body">
<form>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputText">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label id="gridCheck"> Active</label>
</div>
</div>
</form>
</div>
</div>
</div>
But I need to get the output as shown below and align all the things in my interface.
The name also needs to be centered and textbox, and the checkbox also should be aligned.
I'm still a beginner can anyone help me.
There can be two solutions for the result you are trying to achieve.
Make use of bootstrap columns like you are using right now.
Use flexbox
Solution 1
Make a slight change to your code:
<div class="row">
<div class="col-md-6>
<h2 class="card-title">Customer Profile Types</h2>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
Solution 2
Without the bootstrap row and col, pure flexbox (using bootstrap classes).
<div class="d-flex justify-content-between align-items-center">
<h2 class="card-title">Customer Profile Types</h2>
<div>
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
If you want to use CSS, try to use flexbox with property "space-between" on this div (because is father):
<div class="card-header container-fluid">
It should make space between h2 and B's elements.
<div class="col-lg-12" style="padding: 10px">
<div class="card m-b-30">
<div class="card-header container-fluid">
<div class="row">
<h2 class="card-title" style="padding: 10px">Customer Profile Types</h2>
<div align="right" class="col-md-8 float-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
</div>
<br>
<div class="CustomerProfileTypes-body">
<form>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label" style="text-align: center"> Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputText">
<input class="form-check-input" type="checkbox" id="gridCheck" style="margin-left: 2px" >
<label id="gridCheck" style="margin-left: 15px"> Active </label>
</div>
</div>
</form>
</div>
</div>
I am using the following code to generate the buttons below, but 1) the button couldn't spread across the, after using btn-block suggested. And also the button didn't center-aligned, as justify-content-center suggested. I pasted my code below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="container">
<div class="row">
<div class="col pl-1">
<div class="form-row no-gutters h-100">
<div class="form-group col card form-header text-center">
<div class="card-header form-label">
<label for="action">Action <i class="fas fa-plus"></i></label>
</div>
<div class="card-body h-100 d-flex flex-column">
<div class="p-2">
<button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="refresh"><i
class="fas fa-sync"></i></button>
</div>
<div class="p-2">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="selectAll"><i class="fas fa-check"></i></button>
</div>
<div class="col-6">
<button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="deselectAll" disabled><i class="fas fa-times"></i></button>
</div>
</div>
</div>
<div class="p-2">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-sm btn-success btn-block" id="call" disabled>C</button>
</div>
<div class="col-6">
<button type="button" class="btn btn-sm btn-danger btn-block" id="put" disabled>P</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And the screenshow below:
I would like to 1) Vertical Align the button 2) Decrease the spacing between the buttons 3) Make sure the whole card align with the box on the left (I used h-100 to ensure it fills the whole height). Similar to the pics below:
Thanks in advance
you simply edit one class of bootstrap .col-1 to .col-4 and you get the like image
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="col-4 pl-1">
<div class="form-row no-gutters h-100">
<div class="form-group col card form-header text-center">
<div class="card-header form-label">
<label for="action">Action <i class="fas fa-plus"></i></label>
</div>
<div class="card-body h-100 d-flex flex-column">
<div class="p-2">
<button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="refresh"><i
class="fas fa-sync"></i></button>
</div>
<div class="p-2">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="selectAll"><i class="fas fa-check"></i></button>
</div>
<div class="col-6">
<button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="deselectAll" disabled><i class="fas fa-times"></i></button>
</div>
</div>
</div>
<div class="p-2">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-sm btn-success btn-block" id="call" disabled>C</button>
</div>
<div class="col-6">
<button type="button" class="btn btn-sm btn-danger btn-block" id="put" disabled>P</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I would to define a one button group in bootstrap 4 with 4 buttons inside, two buttons for row. (RESPONSIVE)
.box {
background-color: #3C8DBC;
color: #fff;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="box col">Filtri</div>
<div class="box col">Filtri</div>
<div class="w-100"></div>
<div class="box col">Filtri</div>
<div class="box col">Filtri</div>
</div>
</div>
Here you can see more: https://getbootstrap.com/docs/4.1/layout/grid/#equal-width
Furthermore, you can insert an iconfont before Filtri to add the filter icon. E.g.:
<div class="box col"><span class="icon"></span>Filtri</div>
You can try following structural with Grid System for that.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="form-row">
<div class="col">
<button class="btn btn-primary btn-block" type="submit" >Filtri</button>
</div>
<div class="col">
<button class="btn btn-primary btn-block" type="submit" >Filtri</button>
</div>
</div>
<div class="form-row mt-2">
<div class="col">
<button class="btn btn-primary btn-block" type="submit" >Filtri</button>
</div>
<div class="col">
<button class="btn btn-primary btn-block" type="submit" >Filtri</button>
</div>
</div>
</div>
Another Example with Button group:
(Here, You will not get space between 2 button in one row.)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
<button class="btn btn-primary" type="submit" >Filtri</button>
<button class="btn btn-primary" type="submit" >Filtri</button>
</div>
<div class="w-100 mb-3"></div>
<div class="btn-group">
<button class="btn btn-primary" type="submit" >Filtri</button>
<button class="btn btn-primary" type="submit" >Filtri</button>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary">Btn1</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary">Btn1</button>
</div>
</div> <div class="row">
<div class="col-md-6">
<button class="btn btn-primary">Btn1</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary">Btn1</button>
</div>
</div>
</div>