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.
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 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'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;
}
I use bootstrap on my current project, it's working fine but only one glitch:
I have 3 col-sm-6 next to each other, when the second col-sm-6 is longer than the first, third col-sm-6 moves to left and a gap appears between first and third one.
I have 2 points to ask about:
Is it possible / how to remove that gap.
Is it possible / how to fix the third .col-sm-6 .tasks-panel to left.
Here is 2 images demonstrate what problem I have:
Second col-sm-6 is short:
Second col-sm-6 is longer than the first:
My html structure goes like this:
<h4><span data-head-year></span> <span data-head-month></span></h4>
<a class="pull-right" id="today"><div class="btn btn-primary" style="margin:3px">Today</div></a>
</div>
<hr style="margin: 20px 0"/>
<div class="day-headers">
<div class="day header">Mon</div>
<div class="day header">Tue</div>
<div class="day header">Wed</div>
<div class="day header">Thu</div>
<div class="day header">Fri</div>
<div class="day header">Sat</div>
<div class="day header">Sun</div>
</div>
<div class="days" data-group="days">
<!-- the place where days will be generated -->
</div>
</div>
<!-- Responsive calendar - END -->
</div>
Outlets to visit
<div class="template outlet-wrapper" style="display: none">
<div class="outlet-header">
<div class="col-xs-6">
<h4 class="outlet-name"></h4>
</div>
<div class="col-xs-6 text-right">
<h5 class="tools" style="display: none">
<i class="icon-repeat repeat"></i>
<span class="glyphicon glyphicon-remove remove"></span>
</h5>
</div>
</div>
<div class="clearfix"> </div>
<div class="outlet-body">
<div class="col-sm-6">
Time to reach: <spane class="time-to-reach"></spane>
</div>
<div class="col-sm-6">
Time to leave: <span class="time-to-leave"></span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary pull-right" id="add-outlet"> Add Visit </button>
<div class="clearfix"></div>
</div>
</div>
Tasks List
</div>
<div class="panel-footer">Panel Footer</div>
</div>
Sorry for bad format, I don't know why stackoverflow editor breaks my html code; I have tried (Ctrl + K, <pre><code>) but none of them worked !
If you're interested in seeing my code properly, please show my post in editor.
Thanks in advanced.
Update:
A Codepen is available here, press add visit to see what happens if second column is long.
Have you tried to apply "pull-right" to the "col-sm-6" container of "panel panel-primary outlets-panel"?
<div class="col-sm-6 pull-right">
<div class="panel panel-primary outlets-panel">
<div class="panel-heading">
...
Forked Codepen
You'll still have to fix the above space of the "tasks list" container, but that should be trivial.