I am bit struggling to make spaces in between, I am using ml-auto. What I want to achieve is separate each control have its using spaces in between, "Core Status label" should be far each other and be on horizontal line between the two. This is what I have so far on the bootstrap;
<div class="row">
<div class="col-xs-3 ml-md-auto"></div>
<label for="Core Status" class="col-form-label">Core Status</label>
</div>
<!--Viewing button/modules-->
<div class="form-group row">
<div class="col-xs-3 ml-auto"></div>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#formModal">
<i class="fas fa-plus"></i>
Module
</button>
<div class="col-xs-5 ml-2">
</div>
</div>
If you want your controls to be in horizontal, within one row add controls and add mr-auto.
<div class="container-fluid">
<div class="row">
<label for="Core Status" class="col mr-auto">Core Status</label>
<div class="col">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#formModal">
<i class="fas fa-plus"></i>
Module
</button>
</div>
</div>
</div>
Please find the demo
Related
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 am creating an angular application in which i have an detail page with a cardheader which consist of two buttons namely back and edit and both sides and a text in between.
I have used bootstap and set the columns like below.
But when i see the screen in mobile view the header is not aligned properly
Below is the code i am using. How could i fix it to view in a single line in mobile view
<div class="card-header">
<div class="row">
<div class="col-sm-3 col-lg-3 text-left">
<button size="sm" class="btn btn-primary" (click)="goBack()">
<i class="fa fa-chevron-left"></i> Back
</button>
</div>
<div class="col-sm-6 col-lg-6 text-center">
<h4>Switch Detail</h4>
</div>
<div class="col-sm-3 col-lg-3 text-right">
<button size="sm" class="btn btn-primary" (click)="gotoEdit()">
<i class="fa fa-pencil"></i> Edit
</button>
</div>
</div>
</div>
There is a couple of approach you can follow.
You could force the width of the container to stay constant on all views. Note that this can cause your text to overflow.
<div class="card-header">
<div class="row">
<div class="col-3 text-left">
<button size="sm" class="btn btn-primary" (click)="goBack()">
<i class="fa fa-chevron-left"></i> <span class="button-text"> Back
</span>
</button>
</div>
<div class="col-6 text-center">
<h4>Switch Detail</h4>
</div>
<div class="col-3 text-right">
<button size="sm" class="btn btn-primary" (click)="gotoEdit()">
<i class="fa fa-pencil"></i> <span class="button-text"> Edit </span>
</button>
</div>
</div>
</div>
You could use #media Query to hide the text on the buttons leaving only the icons on a mobile view.
#media screen and (max-width: 560px) {
button-text {
display: none;
}
}
Alternatively, you could reduce the font size of the title on mobile using the same approach in case 2 above.
I want to always pull the last column to the right. I have 1 4-column group, 1 7 -column group and a single column.
My content is visible only on specific occasions. In the event that the content in the col-md-7 is there, the last one gets pulled on the right fine. When it isn't there, it goes to the middle.
I am using AngularJS, along with bootstrap 3.
HTML Code:
<div class="row mr10 ml10">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<button class="btn btn-default btn-sm"
ng-click="getData(data, LCtrl.Protection);"
ng-disabled="LCtrl.loading">
Run Query
</button>
<button class="btn btn-danger btn-sm" ng-if='LCtrl.loading'
ng-click="LCtrl.DataStop('Stoped By User')">
Stop Query
</button>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"
permission="[lCtrl.roles.disabled]">
<div class="pull-right mr10">
<span class="mb10"><b>Protection</b></span>
<label class="switch" style="margin-top: 6px; margin-bottom: -6px;">
<input type="checkbox"
ng-model="LCtrl.Protection"
ng-change="changeProtection()">
<span class="slider round"></span>
</label>
</div>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
<a href="//l-l/l.html?l={{lCtrl.licenseStr}}"
class="linkAtHeader pull-right"
style="position: fixed;"
target="_blank">
<i class="fa fa-question-circle" aria-hidden="true"></i>
Help
</a>
</div>
use this code for col-md-1 style={float:right;}
I am practicing with bootstrap and HTML. Please take a look at the picture where I've managed to build and display a return flight. Next thing that I would like to do in order to make it look nicer and more structured: introduce a separation line between flights (separate outgoing from return).
My problem is that I am not sure what to use in order to achieve such design feature in HTML using bootstrap. Should I introduce another row between flights and inject an image or just try to accomplish it by using borders?
Thanks for any help!
<div class="container well well-md searchResult">
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-md-10">
<div class="departFlyRow">
<div class="col-md-2 col-md-offset-2">
<div><b>06:20</b></div>
<div>LHR</div>
</div>
<div class="col-md-2">
<i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
</div>
<div class="col-md-2">
<div>5h 30</div>
<div>direct</div>
</div>
<div class="col-md-2">
<i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
</div>
<div class="col-md-2">
<div><b>12:50</b></div>
<div>SVO</div>
</div>
</div>
<div class="returnFlyRow">
<div class="col-md-2 col-md-offset-2">
<div><b>06:20</b></div>
<div>SVO</div>
</div>
<div class="col-md-2">
<i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
</div>
<div class="col-md-2">
<div>5h 30</div>
<div>direct</div>
</div>
<div class="col-md-2">
<i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
</div>
<div class="col-md-2">
<div><b>12:50</b></div>
<div>LHR</div>
</div>
</div>
</div>
<div class="col-md-2 selectButtonColumn">
<div><b>£100</b></div>
<button type="button" class="btn btn-success">Select</button>
</div>
</div>
</li>
</ul>
</div>
Add a <hr> between your returnFlyRow div's.
Also add the clearfix class to the returnFlyRow divs.
http://jsfiddle.net/m9nn9tvj/1/
I changed your col-md-2 to col-xs-2 to work better in jsfiddle.
You can try one of the following:
1.For the start flight, start the row with an icon of an airplane taking off, for the return flight, start the row with an icon of airplane descending.
2. Arrange start and return in columns.
3. Add a border between flights.
HTH.
I've following grid system showing flight information (10 columns) and select button & price (2 columns). I am trying to make a border which would separate select button section from rest of flight information, but when I apply border CSS rule, it draws line only half of the way. I suspect that might be a problem of my row/column structure. How do I resolve current issue?
Thanks for any help!
Outcome:
CSS:
.selectButtonColumn{
border-left: 1px solid;
}
HTML:
<div class="container well well-md searchResult">
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-md-10">
<div class="departFlyRow">
<div class="col-md-2 col-md-offset-2">
<div><b>06:20</b></div>
<div>LHR</div>
</div>
<div class="col-md-2">
<i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
</div>
<div class="col-md-2">
<div>5h 30</div>
<div>direct</div>
</div>
<div class="col-md-2">
<i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
</div>
<div class="col-md-2">
<div><b>12:50</b></div>
<div>SVO</div>
</div>
</div>
<div class="clearfix returnFlyRow">
<hr>
<div class="col-md-2 col-md-offset-2">
<div><b>06:20</b></div>
<div>SVO</div>
</div>
<div class="col-md-2">
<i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
</div>
<div class="col-md-2">
<div>5h 30</div>
<div>direct</div>
</div>
<div class="col-md-2">
<i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
</div>
<div class="col-md-2">
<div><b>12:50</b></div>
<div>LHR</div>
</div>
</div>
</div>
<div class="col-md-2 selectButtonColumn">
<div><b>£100</b></div>
<button type="button" class="btn btn-success">Select</button>
</div>
</div>
</li>
</ul>
</div>
I would probably put every 12 columns worth of content in separate row, BUT, I don't think you need to do that to achieve what you are after. Try putting a right border on your "returnFlyRow" class.
.returnFlyRow{
border-right: 1px solid;
}