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.
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 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;
}
I'm trying to display two custom buttons in the same row and centered across the page. Currently, the buttons are showing on two different rows. Also, there has to be a better way of centering the buttons than with 'offset3'. Thank you in advance.
<div class = "container">
<div class="row">
<div class="col-sm-3 offset3">
<a href="/bat-times/week">
<button class="btn btn-red"> Test 1</button>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>
You simply use Bootstrap's default class .text-center and that's it, keeping in mind the sum of your columns must be 12 (unless you use a custom number of columns). See code below:
<div class="container">
<div class="row">
<div class="col-sm-6 text-center">
<a href="/bat-times/week">
<button class="btn btn-red "> Test 1</button>
</a>
</div>
<div class="col-sm-6 text-center">
<a href="#">
<button class="btn btn-yellow " onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>
And see Bootply. I have added some CSS for visualization purposes, but you don't need it at all, only the HTML part. And of course, you could use text-left, text-right, text-justify, etc. See Bootstrap Type Alignment for complete list
Try this:
TYPE 1
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 row">
<a href="/bat-times/week">
<button class="btn btn-red pull-right">Test 1</button>
</a>
</div>
<div class="col-xs-6 col-sm-6 row">
<a href="#">
<button class="btn btn-yellow pull-left" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>
DEMO1
TYPE 2
<div class="container">
<div class="row text-center">
<a href="/bat-times/week">
<button class="btn btn-red">Test 1</button>
</a>
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
DEMO2
I found in your code you are using col-sm-3 which is not applicable for smaller devices like mobile rather it will work for tablet and desktop etc. we know that bootstrap grid system has divided our device screen with 12 equal parts if we will use col-xs-6 for our both div then it will divide our device screen into two equal part whether it is a mobile or tablet... doesn't matter. Then I used bootstrap text-center class for making the inside element centered align, bootstrap center-align class which is nothing but text-align:center; in our plain css.
Try the below piece of code. Demo
<div class = "container">
<div class="row">
<div class="col-xs-6 text-center">
<a href="/bat-times/week">
<button class="btn btn-red"> Test 1</button>
</a>
</div>
<div class="col-xs-6 text-center">
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>