i need to build a panel body in a sidebar where the buttons inside ocuppy 6 columns at the moment i have something like this:
i want to have each button ocupy 6 columns and not what is happening at the moment.
here is what i did so far:
<div class="sidebar">
<h4>Document</h4>
<div class="panel-group">
<div class="panel panel-danger">
<div class="panel-body">
<div class="col-md-6">
<button class="btn btn-primary-outline btn-block">
<span class="glyphicon glyphicon-share"></span>
<br>Paragraph
</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary-outline btn-small">
<span class="glyphicon glyphicon-share"></span>
<br>
<span class="fontSize">Image</span>
</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary-outline btn-small">
<span class="glyphicon glyphicon-share"></span>
<br>
<span class="fontSize">Image</span>
</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary-outline btn-small">
<span class="glyphicon glyphicon-share"></span>
<br>Heading
</button>
</div>
</div>
</div>
<div class="panel panel-default">
</div>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="sidebar">
<h4>Document</h4>
<div class="panel-group">
<div class="panel panel-danger">
<div class="panel-body row">
<div class="col-md-6">
<button class="btn btn-primary-outline btn-block button">
<span class="glyphicon glyphicon-share"></span>
<br>Paragraph
</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary-outline btn-block">
<span class="glyphicon glyphicon-share"></span>
<br>
<span class="fontSize">Image</span>
</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary-outline btn-block">
<span class="glyphicon glyphicon-share"></span>
<br>
<span class="fontSize">Image</span>
</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary-outline btn-block">
<span class="glyphicon glyphicon-share"></span>
<br>Heading
</button>
</div>
</div>
</div>
<div class="panel panel-default">
</div>
</div>
</div>
Changed all button's class to btn-block from btm-small. Hope it helps
Related
How to make button position beside select2?, in my case I expect to have a 'Test' button at the same row and at the right side beside select2, I have tried the following:
<div class="card-body">
<div class="row">
<div class="col-lg-3">
<label for="hsm_new_ticket">New ticket</label>
<select class="form-select select2-single" id="hsm_new_ticket"></select>
</div>
<div class="col-lg-1">
<button class="btn btn-block btn-secondary btn-sm"
id="btnTest_hsm_new_ticket" type="button"
onclick="alert('I m here')">
Test
</button>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-lg-3" style="display:flex; justify-content:center; align-items: flex-end;">
<div class="col-lg-11">
<label for="hsm_new_ticket">New ticket</label>
<select class="form-select select2-single" id="hsm_new_ticket"></select>
</div>
</div>
<div class="col-lg-1" style="display:flex; justify-content:center; align-items: flex-end;">
<label for="hsm_new_ticket"></label>
<button class="btn btn-block btn-secondary btn-sm" id="btnTest_hsm_new_ticket" type="button" onclick="alert('I m here')">
Test
</button>
</div>
</div>
</div>
<div class="row">
<a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
</div>
<div class="row">
<textarea name="textareaAxs" ></textarea>
<a class="btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
</div>
enter image description here
.row2 {
display: flex;
align-items: center;
}
<div class="row">
<a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
</div>
<div class="row2">
<textarea name="textareaAxs" ></textarea>
<a class="btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
</div>
Here some DOCUMENTATION
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"/>
<div class="container">
<div class="row">
<div class="col">
<a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
</div>
</div>
<div class="row">
<div class="col">
<div class="input-group">
<textarea class="form-control" name="textareaAxs" ></textarea>
<div class="input-group-append">
<a class="input-group-button btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
</div>
</div>
</div>
</div>
</div>
I working with css, trying to do a custom upload file.. I want something like this:
but for some reason my layout separate in 3 lines when I put into bootstrap modal, like this:
what am I doing wrong? why I can´t show it in just one line?
HTML:
<button class="btn btn-primary btn btn-xs" id="openUpload" style="background-color:#3399FF;color:#FFFFFF">
<span class="glyphicon glyphicon-chevron-up"></span>Importar</button>
<div class="modal" id="uploadModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" style="overflow: hidden">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add new File</h4>
</div>
<div class="modal-body col-md-12" id="modal-body">
<div id="upload">
<div class="col-md-12">
<div id="drop">
<span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn">
<button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
</span>
</div>
</div>
<div class="fileupload-buttonbar">
<div>
<button type="submit" class="btn btn-success start">
<i class="glyphicon glyphicon-upload"></i><span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-upload"></i><span>Clear upload</span>
</button>
<button type="reset" class="btn btn-danger cancel">
<i class="glyphicon glyphicon-ban-circle"></i><span>Cancel All</span>
</button>
</div>
</div>
<ol class="files upload-files-list"></ol>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Fiddle Demo
I search Bootstrap documentation but I get similar result, I try with given code but I get same result:
Just wrap your icon, input, button into input-group class.
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn"><button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button></span>
</div>
Also you have used col-md-12 wrongly, use row class before it.
Updated Fiddle
This seems to work :
<div id="drop" class="input-group">
<span class="input-group-addon input-group-prepend"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn input-group-append">
<button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
</span>
</div>
Demo
Note the classes input-group, input-group-append and input-group-prepend
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.
I'm using angular-strap aside with Bootstrap3. My aside html template is given below -
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title">Settings</h4>
</div>
<div class="aside-body" ng-controller="SettingsCtrl">
<form name="createCustomerForm" role="form">
<div class="form-group">
<label for="settings_email">Email</label>
<input class="form-control" id="settings_email" name="settings_email" type="text">
</div>
<div class="form-group">
<label for="language">Language: </label>
<button id="language" type="button" class="btn btn-default" data-html="1"
data-animation="am-flip-x" ng-options="country.name for country in countries track by country.id"
data-placeholder="Select country..."
ng-model="selectedLang" ng-change="onLanguageSelected(country)"
bs-select>
Action <span class="caret"></span>
</button>
</div>
</form>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
This works so far-
But if I change the code -
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title">Settings</h4>
</div>
<div class="aside-body" ng-controller="SettingsCtrl">
<form name="createCustomerForm" role="form">
<div class="form-group">
<label for="settings_email">Email</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" id="settings_email" name="settings_email" type="text">
</div>
</div>
<div class="form-group">
<label for="language">Language: </label>
<button id="language" type="button" class="btn btn-default" data-html="1"
data-animation="am-flip-x" ng-options="country.name for country in countries track by country.id"
data-placeholder="Select country..."
ng-model="selectedLang" ng-change="onLanguageSelected(country)"
bs-select>
Action <span class="caret"></span>
</button>
</div>
</form>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
Then it captures the whole window -
How can I make it to remain same size?
You can just add a max-width tag on your content class in aside template that you are loading.
Assume