Bootstrap 4: Responsive layout on extra small screen - css

I have implemented a container in such a way that on extra small screen they should have assigned width.
<div class="container w-60 border border-secondary">
<h1 class="text-black-50 text-center mb-5 bg bg-light">Warenkorb</h1>
<hr/>
<div class="row mt-5">
<div class="col-xs-1">
<span>1x</span>
</div>
<div class="col-xs-6">
<small class="text-muted description">Some description</small>
</div>
<div class="col-xs-2">
<div class="btn-group" role="group" aria-label="quantity">
<button type="button" class="btn btn-default border border-success btn-sm align-bottom float-right" (click)="decreaseTheQuantity(item)"><span class="vertical-align: baseline;">-</span></button>
<button type="button" class="btn btn-default border border-success btn-sm align-bottom float-right" (click)="increaseTheQuantity(item)"><span class="vertical-align: baseline;">+</span></button>
</div>
</div>
<div class="col-xs-1 float-right">
40€
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-default btn-sm float-right" (click)="deleteTheItem(i)">
<span class="glyphicon glyphicon-trash border border-success btn-sm align-top float-right btntrash"></span>
</button>
</div>
</div>
It looks okay on most of the screens
but on s5 it looks bit distorted.
I want trash button to be in a same row like in first picture.
I am using bootstrap and using class="col-xs-X" to split the columns on small screens.
Why its not working for s5 device ?
Second problem is:
<div class="col-xs-1 float-right">
40€
</div>
my css
.glyphicon.glyphicon-trash{
font-size: 10px;
top: -6px;
}
.btntrash{
height:20px;
top: -6px;
}
for above column i am using float-right and expect a very little space between price and trash button. I am not able to achieve that either.
Could you please give me some pointers ?

https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap 4 do not have xs grid. You should change col-xs-6 to col-6, but if you want to have different grid on desktop or tablet versions, you can use lg and md size.

A little late to the party, but I would suggest is using col-auto and col to adjust your layout for the small screen. I find that there's some situations where specifying a total of 12 columns reacts in weird ways when the content of the column doesn't fit it's width (like you have done).
And also make use of the breakpoints available in bootstrap to change your column sizing for different screens.
<div class="row mt-5">
<div class="col-auto col-sm-1">
<!-- Quantity -->
</div>
<div class="col col-sm-6">
<!-- Description -->
</div>
<div class="col-auto col-sm-2">
<!-- Plus/Minus buttons -->
</div>
<div class="col-auto col-sm-1 float-right">
<!-- Price -->
</div>
<div class="col-auto col-sm-2">
<!-- Delete Button -->
</div>
</div>
col-auto is used to size the column based on it's content.
col is used to fill up any left over space in the row.

Related

how to add button next to a text in a modal header using bootstrap

I have this modal header and wish to add the "download" button to the right of the text "Optimize data". Here is my code for the same but everytime it aligns to the below of the modal header text. I have also tried float and align properties but it didnt seem to work.
<div class="modal-header">
<h3 class="align:left" translate>{{Title}}</h3>
<div class=align:"right">
<button type="button" class="btn btn-info" id="downloadLog" translate>Download Log</button>
</div>
</div>
The modal-header in Bootstrap 4 is display:flex. Use ml-auto to push the button to the right...
<div class="modal-header">
<h3>Title</h3>
<div class="ml-auto">
<button type="button" class="btn btn-info" id="downloadLog" translate>Download Log</button>
</div>
</div>
https://www.codeply.com/go/qPMA41arJV
<h3> is an element that use the entire line so you should add an row, and two columns and then you will can do that
<div class="row">
<div class="col-8">
<h3>Text</h3>
</div>
<div class="col-4">
<button>Button here</button>
</div>
</div>
bootstrap it self has class "input-group"
You can use that as below.
<div class="input-group">
<span>
<a href="#" />
</span>
</div>

expand height of jumbotron to cover whole column height

Using bootstrap 4.0.0, I have the following code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="jumbotron mt-3 container-fluid" style="padding: 0.6em 1.6em;">
<h5>Title</h5>
<p style="font-size: 14px;">text text text</p>
<button type="button" class="btn btn-primary"> Click me </button>
</div>
</div>
... repeated many times
</div>
</div>
I am trying to create a grid of 3 by x jumbotrons. I am not able to expand the height of the jumbotrons as to cover 100% of the given row in which they are. Each one is with their own height. The ideal is that the <h5> and the <p> are top-aligned, while the <button> is bottom-aligned.
How can I achieve the above? Thanks
Use the flexbox utils for the jumbrotrons.
<div class="col-md-4">
<div class="jumbotron mt-3 h-100 d-flex flex-column align-items-start" style="padding: 0.6em 1.6em;">
<h5>Title</h5>
<p style="font-size: 14px;">text texttext</p>
<button type="button" class="btn btn-primary mt-auto"> Click me </button>
</div>
</div>
https://www.codeply.com/go/4uafEjOFdn
h-100 - make jumbotron fill height of col
d-flex flex-column - display:flex the jumbotron the content vertically
align-items-start - align content down the left side
mt-auto - align bottom on the bottom
Related: Bootstrap 4 cards - align content at the bottom

Bootstrap 4 center header elements on mobile

Here is my header setup (bootstrap 4):
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="navbar-brand"><img src="..."></div>
</div>
<div class="col-md-6 text-right">
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</div>
</div>
As expected on desktop the logo sits on the left and the button sits on the right.
When on smaller devices I would like the logo and button to align in the center.
I have tried to add a .text-md-center class to both columns but this caused both elements to center in there columns at all widths (desktop and mobile).
What is the correct way to do this?
An alternate to #cwanjt answer is using the text-center. You just then need to use text-md-left and text-md-right to keep the desired alignment on larger widths.
<div class="container">
<div class="row">
<div class="col-md-6 text-md-left text-center">
<div class="navbar-brand"><img src="//placehold.it/140x30"></div>
</div>
<div class="col-md-6 text-md-right text-center">
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/Ijl31XHfRT
#TimothyAURA, if I'm understanding you question correctly, it's how to center the content of your header on smaller screens. If that's the case, you can look at the code in this codeply project to get an idea of how to do that. It seems like you have some familiarity with Bootstrap, but here's a reference to Bootstraps utilities for justifying content.
It uses a justify-content-center class for device sized medium and below, and a justify-content-lg-between on larger displays.
<header class="d-flex justify-content-center justify-content-lg-between">
<a class="navbar-brand" href="#">
<img src="http://via.placeholder.com/65x65" alt="">
</a>
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</header>

How to align button to center using Bootstrap

I have created a tile using Bootstrap. Inside the tile, near to the bottom I want three buttons (start, middle and end) of the tile.
I made the start and end buttons but using two div tags with pull-left and pull-right classes. Now what I want is to place the middle button.
Here's a part of my code and a screenshot:
<div class="col-lg-12">
<div class="pull-left">
<button class="btn btn-primary btn-sx" type="button">Confirm</button>
</div>
<!-- I want another button here, center to the tile-->
<div class="pull-right">
<button class="btn btn-primary btn-xs pull-right" type="button">Decline</button>
</div>
</div>
Use this option:
<div class="text-center">
<button class="btn btn-primary btn-sx" type="button">
Confirm
</button>
</div>
One Bootstrap's most powerful features is nesting row elements. Every col-* container can have another row inside it, which then provides another full set of 12 col spaces:
<div class="col-lg-12">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-primary btn-sx" type="button">Confirm</button>
</div>
<div class="col-xs-4">
<button class="btn btn-primary btn-xs" type="button">Middle Button</button>
</div>
<div class="col-xs-4">
<button class="btn btn-primary btn-xs" type="button">Decline</button>
</div>
</div>
</div>
I'm not sure how your pull-* classes exactly work, but using Bootstrap's built-in grid system you should be able to get rid of those.
Don't miss the Bootstrap guide on nesting columns, as it provides way more information than this answer.
You're using bootstrap I presume, so your best bet and practice would be to take advantage of its' grid system.
Make a div with a class called row and divide the children inside of that parent div into the content you want.
The way this division works is that the number behind col-[size]- decides how much of the horizontal space it will take up. In the end it has to add up to 12, so in your case, we want three parts that are size 4 each.
For example :
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
Then simply put the buttons inside of the col-xs-4 div's and you're ready to go.
that worked for me
<div class="text-center">
<div class="text-center">
<button type="button" class="btn btn-fb btn-outline-primary waves-effect" (click)="doFacebookLogin()" mdbWavesEffect>
<i class="fa fa-facebook left"></i>Facebook</button>
<button type="button" class="btn btn-tw btn-outline-info waves-effect" (click)="doTwitterLogin()" mdbWavesEffect>
<i class="fa fa-twitter left"></i>Twitter</button>
<button type="button" class="btn btn-gplus btn-outline-danger waves-effect" (click)="doGoogleLogin()" mdbWavesEffect>
<i class="fa fa-google-plus left"></i>Google +</button>
</div>
divide the row div in to 3 column divs - col-md-4. Use text-center for the parent div(col-md-4) of each button to solve the issue.
<div class="row">
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B1</button>
</div>
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B2</button>
</div>
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B3</button>
</div>
</div>

Issue on Hiding Overflow in Bootstrap CSS

Can you please take a look at This Demo and let me know why the css overflow:hidden rule is not working for .switch class?
Please be informed that I do not want to change any thing in buttons and Switch mark ups and need to keep them as they are (Must not change the col-lg-x sizes)
<div class="panel panel-default">
<div class="panel-heading">Switch</div>
<div class="panel-body">
<div class="row">
<div class="switch col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-10 col-md-10 col-sm-10 col-xs-10">
<button class="btn btn-primary norightradius col-lg-1 col-md-1 col-sm-1 col-xs-1">Yes</button>
<button class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-11 col-xs-11">New Model</button>
<button class="btn btn-primary noleftradius col-lg-1 col-md-1 col-sm-1 col-xs-1">No</button>
</div>
</div>
</div>
</div>
Here is a shot of the required result
The Bootstrap grid system is based upon 12 columns. If you add up the columns consumed by your Yes button, title bar, and No button, you'll see that you've got 13 columns.
Just resize the title bar to be 10 columns instead of 11.
Change
<button class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-11 col-xs-11">New Model</button>
To
<button class="btn btn-primary noradius col-lg-10 col-md-10 col-sm-10 col-xs-10">New Model</button>
See http://jsfiddle.net/wilsonjonash/Fz4CW/6/
And if you'd like the button to be hidden at certain screen sizes, try using the responsive utility classes(like hidden-sm or hidden-xs): http://getbootstrap.com/css/#responsive-utilities
Oh, and why does it wrap? The bootstrap grid classes use float:left to arrange the grid items. overflow:hidden only has the effect of containing floats, not hiding them.

Resources