Here is my code :
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2">
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
</div>
<div class="col-sm-9 col-md-10">
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</div>
</div>
<hr>
</div>
And Here is the fiddle.
https://jsfiddle.net/SimplytheVinay/0g8fm8u6/
I tried multiple combination of classes. Even setting the height of Label manually doesn't work. Somehow label is occupying more height than its size. Tried setting margins as well. No Luck.
Pretty new to web development, So correct me If I am missing anything.
You can set the H2 also for the button https://jsfiddle.net/7n0t19hr/
<div class="col-sm-9 col-md-10">
<h2>
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</h2>
</div>
</div>
<hr>
</div>
The problem is that you are not closing the h2 tag.
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
See. Fix that and you will be able to manipulate the height and padding or whatever.
Related
Here I added 2 buttons on the header of the accordian, but when I click the button the entire accordian collapses or expands. Is there a way to add buttons to it in such a way that clicking them won't collapse or expand the accordion?
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
aria-controls="panelsStayOpen-collapseTwo">
<div>26-08-21</div>
<div style="margin-left: -20px;" class="col-1"></div>
<div>project_id</div>
<div class="col-3"></div>
<div>title</div>
<div class="col-3"></div>
</button>
<button type="button" class="btn btn-sm btn-success">
<em class="far fa-edit"></em> Edit
</button>
<button type="button" class="btn btn-sm btn-danger">
<i class="far fa-trash-alt"></i> Delete
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<br>
<button style="margin-left: 20px;" type="button" class="btn btn-sm btn-outline-primary">Download CSV</button>
</div>
</div>
</div>
With the on click of buttons, you need to use $event.stopPropagation()
public onButtonClick($event): void {
// Do something on click
$event.stopPropagation()
}
I have written a Reactive form. The submit button is supposed to be outside the Reactive form.It has also got two dropdowns. In this form im reading data dynamically from api. I have written click events in the dropdown as well(for a purpose to bind that particular value when i submit the form). The issue here is that whenever i click on the dropdown...the submit button click event is getting triggered....i have been trying to make them(the three click events) be unique...but im unable to.... kindly help me. Below im providing my code.
<div class="container content-box-shadow tiles-top-spacing tiles-page">
<div class="row assessment-m-b">
<div class="col-lg-12 col-md-12 pt-3 pb-5">
<div class="d-flex align-items-center justify-content-between">
<span class="common-headding">{{pageText?.accountSettingPageTextData?.editHeader}}</span>
<div>
<button type="submit" class="common-button green"
(click)="onSubmit()">{{pageText?.accountSettingPageTextData?.save}}</button>
<button type="button"
class="common-button orange" (click)="previousModule()">{{pageText?.accountSettingPageTextData?.cancel}}</button>
</div>
</div>
<div class="account-settings-block">
<form *ngIf="personalData" [formGroup]="accountSettingsForm" >..................................................
<!-- Account-Settings Security Questions -->
<div *ngIf=" personalData?.dashBoardPersonalInfoData?.securityQuestionsAnswers.isVisible"
class="account-form-inner-block">
<legend>{{pageText?.accountSettingPageTextData?.questions?.header}}<span class="required">**</span></legend>
<div class="row">
<div class="col-md-6">
<div>
<label for="question1">
{{pageText?.accountSettingPageTextData?.questions?.question1}}
</label>
<div class="btn-group w-100 pt-1" ngbDropdown>
<button class="btn btn-secondary dropdown-toggle w-100 text-left"
aria-haspopup="true" aria-expanded="false" id="dropdownMenu1"
ngbDropdownToggle>
<span *ngIf="!SecurityQuestion1.question">
Select a Question
</span>
<span *ngIf="SecurityQuestion1.question">
{{SecurityQuestion1.question}}
</span>
</button>
<div class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenu">
<button (click)="selectQuestion1(questions)"
*ngFor="let questions of personalData?.dashBoardPersonalInfoData?.securityQuestions"
class="dropdown-item">{{questions?.question}}
</button>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<div class="col-md-6">
<div>
<label for="question2">
{{pageText?.accountSettingPageTextData?.questions?.question2}}
</label>
<div class="btn-group w-100 pt-1" ngbDropdown>
<button class="btn btn-secondary dropdown-toggle w-100 text-left"
aria-haspopup="true" aria-expanded="false" id="dropdownMenu2"
ngbDropdownToggle>
<span *ngIf="!SecurityQuestion2.question">
Select a Question
</span>
<span *ngIf="SecurityQuestion2.question">
{{SecurityQuestion2.question}}
</span>
</button>
<div class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenu">
<button (click)="selectQuestion2(questions)"
*ngFor="let questions of personalData?.dashBoardPersonalInfoData?.securityQuestions"
class="dropdown-item">{{questions?.question}}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I could solve my issue above by using form="myForm" attribute in the save button. and using id="myForm" attribute in the form tag.....just by using those attributes....i could have unique trigger for all the three events......Im stilll keeping posted so that someone neednot have to waste almost 4hours or more in finding it out....
I would like to create a grid of buttons much like this one:
After looking at this question How to set up a grid of buttons in bootstrap? I added this in the cssfile:
#channels button {
float: left;
width: auto;
}
And these buttons to the html file:
<div id="channels" className="span12">
<div className="btn-group">
<button type="button" className="btn btn-default" id="channel">
A
</button>
<button type="button" className="btn btn-default" id="channel">
B
</button>
</div>
</div>
However, I am not getting any spacing:
So how can I create such a grid?
Give each button margin, which will space it out. The twitter bootstrap has buttons with a default margin of 0 so that is why there is currently no spacing.
P.S. You should not have two elements with the same id.
.channel{
margin:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="channels" className="span12">
<div className="btn-group">
<button type="button" className="btn btn-default" class="channel">
A
</button>
<button type="button" className="btn btn-default" class="channel">
B
</button>
</div>
</div>
This is because you are not using the ROWS and Cols of bootstrap.
Using a row and col, you can determinate how many columns you want and give them until 12 rows. Like:
<div class="row">
<div class="col-lg-6">
<button type="button" className="btn btn-default" id="channel">
A
</button>
</div>
<div class="col-lg-6">
<button type="button" className="btn btn-default" id="channel">
B
</button>
</div>
</div>
And this gonna give you two buttons separate because you have 6 cols in one button and 6 cols in other buttons. If you want something like the image, you have to:
<div>
<div class="row">
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
SAFE
</button>
</div>
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
FUN
</button>
</div>
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
FRIENDLY
</button>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
SNOW
</button>
</div>
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
BEACH
</button>
</div>
<div class="col-lg-4">
<button type="button" className="btn btn-default" id="channel">
SURFING
</button>
</div>
</div>
</div>
As you can see, we were distribute peer row 3 columns with 4 cols, because 4 * 3 = 12 columns on the Grid System. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
For more about it, please visit http://getbootstrap.com/css/#grid for learn GRID of Bootstrap.
I have a question that has been surely asked 10000 times already but I don't really understand the answers.
I want to make something simple : divide my screen in 3 columns, add some buttons on the 1 column, a google map in the second one and other buttons in the 3rd one.
How can I manage to do that properly?
For moment I added the buttons where I wanted, but when it comes to manage the map, I have problems usually with the size.
<div class="container">
<div class="row">
<div class="col-lg-4">
<button type="button" class="btn btn-primary btn-lg">1</button>
<button type="button" class="btn btn-default btn-lg">2</button>
</div>
<div class="col-lg-4">
<div id="map-container" style="width: 500px; height: 300px;"></div>
</div>
<div class="col-lg-4">
<form class>
<b>Point A : <input type="text" class="form-control"></b>
<b>Point B : <input type="text" class="form-control"><b>
<button>Validate</button>
</form>
</div>
</div>
<div class="row">
<br></br>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<button type="button" class="btn btn-success sharp">Good</button>
<button type="button" class="btn btn-warning sharp">Normal</button>
<button type="button" class="btn btn-danger sharp">Bad</button>
</div>
<div class="col-lg-4"></div>
</div>
</div>
You should set the map height style, but not the width. Also you should set:
#map-container img {
max-width: none;
}
See this question on stackoverflow for more information.
I use Bootstrap 3 and the grid system. I have following HTML to display a sort of navigation.
The problem is my button group cannot be centered. I already tried the built in class "center-block" and different CSS approaches, but failed.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="btn-group btn-group-lg">
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
</div>
</div>
</div>
</div>
<p class="text-center">Center aligned text.</p>
This will align contents in Bootstrap.
Taken directly from the bootstrap documentation.
You can center the button group div by applying
display:inline-block
Then applying to the parent div
text-align:center
Example here: http://jsfiddle.net/u7g3p/
You can assign text-akign: center; to the class .btn-group
DEMO http://jsfiddle.net/D2RLR/6159/
You can add a class 'text-center' which is bootstrap default class to define text-align:center,
But 'btn-group' class in bootstrap is defined as display:inline-block by default, so width of this div wont be 100% to make your inner links center align.
How to fix -
DOM changes, add class text-center to this div- <div class="btn-group btn-group-lg text-center">
CSS changes -
.btn-group{
width:100% (or) display:block;
}
Just add 'text-center' class to the 'btn-group' parent.
<div class="col-xs-12 text-center">
<div class="btn-group btn-group-lg">
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
</div>
</div>
Alternatively you can add tag before and after the div
<center>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="btn-group btn-group-lg">
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
<a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
</div>
</div>
</div>
</div>
</center>
Here's a modified link :http://jsfiddle.net/sunilkjt/4bq1f320/
Thanks