How do I set the red background area to have the same height as it does width in my demo?
Demo: https://jsfiddle.net/tv0b5m3b/
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3 col-xs-6" style="background:red;">
<button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i><br>Resend</button>
</div>
<div class="col-sm-3 col-xs-6">
<button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i><br>Resend</button>
</div>
<div class="col-sm-3 col-xs-6">
<button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i><br>Resend</button>
</div>
<div class="col-sm-3 col-xs-6">
<button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i><br>Resend</button>
</div>
https://jsfiddle.net/tv0b5m3b/
https://jsfiddle.net/vivekkupadhyay/tv0b5m3b/1
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<div class="container">
<div class="row">
<div class="col-sm-12" style="background:red;">
<div class="row">
<div class="col-sm-3 col-xs-6">
<button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i>
<br>Resend</button>
</div>
<div class="col-sm-3 col-xs-6">
<button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i>
<br>Resend</button>
</div>
<div class="col-sm-3 col-xs-6">
<button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i>
<br>Resend</button>
</div>
<div class="col-sm-3 col-xs-6">
<button type="button" class="btn btn-default btn-lg text-center"><i class="icon-cog icon-4x"></i>
<br>Resend</button>
</div>
</div>
</div>
</div>
Related
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'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>
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>
I would like to have my two divs(Up and down buttons) organized in a layout row side by side and taking the full widh of the page.
right now, they are organized like this :
My HTML is this :
<div layout="row">
<div class="btn btn-info btn-lg" width="50%;">
<span class="glyphicon glyphicon-menu-up"></span> Up
</div>
<div class="btn btn-info btn-lg" width="50%;">
<span class="glyphicon glyphicon-menu-down"></span> Down
</div>
</div>
Something like this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div layout="row">
<div class="col-xs-6">
<div class="btn btn-block btn-info btn-lg">
<span class="glyphicon glyphicon-menu-up"></span> Up
</div>
</div>
<div class="col-xs-6">
<div class="btn btn-block btn-info btn-lg">
<span class="glyphicon glyphicon-menu-down"></span> Down
</div>
</div>
</div>
If you are using boostrap you can do it in following way:
<div class="row">
<div class="col-md-6">
<div class="btn btn-info btn-lg btn-full-width">
<span class="glyphicon glyphicon-menu-up"></span> Up
</div>
</div>
<div class="col-md-6">
<div class="btn btn-info btn-lg btn-full-width">
<span class="glyphicon glyphicon-menu-down"></span> Down
</div>
</div>
</div>
CSS:
.btn-full-width { width: 100%; }
Edit: added CSS class for buttons.
For example, see below code, when I resize the browser to very small width, the gird will collapse, so two button groups and text align in vertical, and there is no space between them, how can I add some space?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-8">
asdf
</div>
</div>
You can set the margin-bottom initially or in the media where it changes like this:
#media (max-width: 991px){
.col-margin{
margin-bottom: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2 col-margin">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-2 col-margin">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-8 col-margin">
asdf
</div>
</div>
Check this out for more info about bootstrap grid system: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
And this for better understanding of media: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can use .classname >[class*='col-'] in conjunction with your row to add space or whatever rule to your columns inside that row.
#media (max-width: 991px) {
.col-space >[class*='col-'] {
margin-bottom: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row col-space">
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-8">asdf</div>
</div>
</div>