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;}
Related
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
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 have something like this:
<div class="form-group col-sm-6">
<div id="total">$50,20</div>
<button class="btn btn-theme" data-role="button" id="purchase"><i class="fa fa-envelope-o"></i>Send</button>
</div>
I want the total to be to the left of the button, but it appears over the button. I already tried making the column bigger but it stays there so the problem is not on the size.
You want it on the left? like this?
then,
<div class="form-group col-sm-6">
<div class="col-xs-1">
<label id="total">$50,20</label>
</div>
<div class="col-xs-1">
<button class="btn btn-theme" data-role="button" id="purchase"><i class="fa fa-envelope-o"></i>Send</button>
</div>
</div>
i would do it like this
<div class="form-group col-sm-12">
<div class=" col-sm-6" id="total">$50,20</div>
<div class=" col-sm-6">
<button class="btn btn-theme" data-role="button" id="purchase"><i class="fa fa-envelope-o"></i>Send</button>
</div>
div is by default a block element and that means that it takes up the whole available space.
Try to add this css rules:
#total {
display: inline-block;
float: left;
}
Alternatively, you could make the amount a span element like
<span id="total">$50,20</span>
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;
}