How can I put this button inline to be responsive?
had tried doing but doesnt work.
<div class="form-group btn-group" >
<ul class="btn-group list-inline social " style="display: flex;">
<li class="col-xs-12">
<button type="submit" class="btn btn-default" name="btn-login" id="btn-login">
<span class="glyphicon glyphicon-log-in"></span> Sign In
</button>
</li>
<li class="col-xs-12">
Sign in with Facebook
</li>
<li class="col-xs-12">
Sign UP Here
</li>
</ul>
</div>
You've placed style="display: flex;" on your ul. By default flex containers do not wrap. If you want it to wrap, you need to add
flex-wrap:wrap;
...to it.
Or, if you only want it to apply on some screen widths, move that declaration in a CSS file, where you'll be able to use #media queries.
Not being able to add responsiveness rules to it is one of the main reasons inline style is considered very bad practice (the other is because it's hard to maintain).
You better use #media queries. Set the #media query based on your target screen. Your button's text is too lengthy as well so it would be best if you display your lists by block to prevent overlapping the screen size.
Mobile View:
#media all and (max-width: 479px) {
ul.btn-group {
display: block;
}
ul.btn-group li {
display: block;
}
}
I would remove the style="display: flex;" from you ultag. Without it the two buttons will be full width (they have the col-xs-12 class).
To have them in one line in case the modal is displayed larger on larger screens you can add an additional class like col-sm-6 or col-md-6 to both.
Related
JSFiddle: https://jsfiddle.net/yL9b2ewu/1/
In this fiddle I have 3 DIVs using Bootstrap 3.3.7 that are next to each other; each DIV is col-sm-3.
Each DIV contains a fixed-size button, then there should be a small amount of space under the button, and then optional explanatory text. Each DIV should end with a border at the same level as the lowest available DIV regardless of whether it has text or not.
One solution is to hard-code some <BR>s for the explanation section. In the 3rd DIV I could put in 4 fixed <BR>s. But this hackery doesn't seem right to me, there should be something dynamic and robust.
<div class="col-md-12 col-sm-12 col-xs-12" style="margin-top:10px; margin-bottom: 10px; font-family:'Source Sans Pro', sans-serif; font-size: 14px">
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-success btnSubmitWizard"><b>Submit Recall Now<br><br></b></button>
<br><br>No changes can be made after the recall is submitted.
<!-- Can Insert <BR> here but wrong approach -->
</div>
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-primary btnSubmitWizard"><b>Review and Edit<br><br></b></button>
<br><br>Review or edit timeline before submitting.
<!-- Can Insert <BR> here but wrong approach -->
</div>
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-primary btnSubmitWizard"><b>Logout and<br>Submit Later </b></button>
<br><br>
<!-- Can Insert <BR> here but wrong approach -->
</div>
</div>
I think that you could select only the last div using :last-child and add to it a bigger padding-bottom.
Give a class for the parent of the columns. Something like .colsParent.
Then, for the same breakpoint of Bootstrap #media, you set flexbox for this element.
#media (min-width: 768px) {
.colsParent {
display: flex;
}
}
By default, it fills the full height of the entire column.
Do not set display: flex inline, because it will affect the layout for devices smaller than the breakpoint above.
Regarding Bootstrap 4:
i was trying to collapse .card div on mobile view only.
i tried .collapse class but in this way it collapses on all sizes of screen. here are my codes in case if somebody wants to see;
<div class="col-lg-3">
<div class="card>
<div class="card-header">
<a data-toggle="collapse" data-target="#t10"><h3>Top 10</h3></a>
</div>
<div class="card-body collapse" id="t10">
<div class="row ">
<div class="col-md-12>
<h4>ABC</h4>
<h5>Review: <img src="../../images/4stars.png"><br></h5>
</div>
</div>
</div>
</div>
after spending hours searching on internet, i didn't find anything probably i was using wrong search terms (as newbie), I got an idea to reverse the situation so I un-collapsed for =>992px in media query, codes as following:
#media (min-width: 992px) {
#t10.collapse { display: block; }
}
As you can see it is OK but I really want to learn the best way to collapse a div/card when screen size changes to less than 992px.
(Pardon my English. I am not Eng speaker).
Just add .dont-collapse-sm class to Your collapsible div to not disappear over 768px breakpoint.
Credits for: https://codepen.io/glebkema/pen/xryaKK (also helped me a lot!)
#media (min-width: 768px) {
.collapse.dont-collapse-sm {
display: block;
height: auto !important;
visibility: visible;
}
}
Use the responsive display classes.
For example,
<div class="card-body d-none d-lg-flex" id="t10"></div>
Will hide this DIV on screen widths less that 992px.
Bootstrap 4 providing classes for responsive screen. like col-lg-* col-sm-*
So, You can try changing the display by using the bootstrap class itself.
E.g.
<div class="d-block d-sm-block d-md-flex d-lg-flex d-xl-flex">
/** your content **/
</div>
This classes will change the display property for every screens which we mentioned.
For your reference, Check the Bootstrap 4 Docs: Here
I'm trying to use a label to tell when something is InProcess but the label moves another span in the panel even though it has plenty of room to move around.
How it is right now:
http://imgur.com/Q9VgJMs
How it should be:
http://imgur.com/5yXGGCs
Here's the code for it.
<div class="panel-body log-work-lot-container">
<ul class="list-unstyled">
<li class="log-work-item-lot" data-ng-click="vm.SetActiveBatch(batch);" data-ng-class="{'selected' : batch.IsActive}"
data-ng-repeat="batch in vm.Batches" data-ng-show="!batch.IsScrapped && !batch.IsCompleted">
<div style="text-align:center;">
<span class="pull-left">0000{{batch.Name}}</span>
<span class="pull-right label label-info" data-ng-show="batch.InProcess"> In Process </span>
<span style="">QTY {{batch.Quantity}}</span>
</div>
</li>
</ul>
</div>
This should do it:
.list-unstyled .pull-left { margin-right: -100%; }
.list-unstyled .pull-right { margin-left: -100%; }
Please note this is a hack-ish way of doing it and makes your left/right elements overlap the centered content if they don't fit on one row. In order not to overlap when on very small screens, I updated your fiddle based on your markup. It's not perfect, but it's better than overlapping them :).
Use bootstrap grid structure to organize data in column formats.
An example - http://www.bootply.com/5FLFCdIny1
(Above example uses only col-xs-*, which will display data in column format for all kind of devices. You can customize display based on screen size)
I am having problem making footer with pull-left and pull-right then center on mobile devices. Currently on desktop it is displaying properly.
Code(fiddle):
<footer >
<div class="container">
<p>
<div class="col-sm-4 pull-left">
<strong>Powered by Google</strong>.
</div>
<div class="col-sm-4 pull-right">
Terms
<span class="">|</span>
Policy
</div>
</p>
<BR>
<p>
<div class="col-sm-4 pull-left">
Please direct all queries to admin#gmail.com
</div>
<div class="col-sm-4 pull-right">
2.1
</div>
</p>
</div>
As you can see when it is on mobile devices it is displayed as this:
I want to be able to display it similar to this on mobile device where it is centered:
Wrap your col-*** divs in the .row div.
I think you don't need pull-left and pull-right classes. Add col-sm-push-4 class to make right div move to the page's right border
Add custom css to center content on mobile devices, like this:
#media (max-width: 767px) {
.col-sm-4 {
text-align: center;
}
}
Or add custom class to these divs, if you don't want other .col-sm-4 divs to have centered content.
https://jsfiddle.net/1gLmb0yy/6/
You need to use query media to do that, because when the result is pull to right in a small resolution. it will responsive and go to bottom. You can use F12 developer tool to see that.
<footer >
<div class="container">
<div class="col-sm-4 row">
<strong>Powered by Google</strong>.
Please direct all queries to admin#gmail.com
</div>
<div class="col-sm-4 row pull-right">
Terms
<span class="">|</span>
Policy
2.1
<div/>
</div>
</div>
<footer>
Developer tool result.
Example Media Query
#media (max-width: 767px) {
.col-sm-6.row.pull-right {
position: relative;
top: -15px;
}
}
I have a bootstrap row containing a header tag and a link tag. They are aligned on the same row when the screen width is less than 768 pixels. When the container width is 768 or greater the link element shifts a few pixels higher.
Here is an example that demonstrates this behaviour: https://jsfiddle.net/bz3399x8/
<div class="row">
<div class="col-sm-12">
<a class="btn btn-primary" href="#" style="width: 80px; float: right;">
<i class="icon-plus">
Add
</i>
</a>
<h1>
Hello World
</h1>
</div>
</div>
Here are screenshots demonstrating this behaviour.
There are two issues:
what is causing this?
how to i fix this?
your syntax according to Bootstrap Docs is wrong,
it needs the .container to wrap .row
and
h1 and a button elements needs to be wrapped in Bootstrap columns.
So, you can use .col-sm-10 + .col-sm-2 in this case.
Added .col-xs for demo
.row {
/* demo*/
background:red
}
.btn {
margin-top:20px /* choose as it fit you better */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-10 col-sm-10">
<h1>
Hello World
</h1>
</div>
<div class="col-xs-2 col-sm-2">
<a class="btn btn-primary" href="#">
<i class="icon-plus">
Add
</i>
</a>
</div>
</div>
</div>
While wrapping elements in different column will help answer your problem. If you are looking at wrapping both elements inside single column you need to specify elements to be inline. Problem is occurring since h1 element and a element even though in same row for bootstrap but are displayed as block and inline-block.
Add display: inline-block to h1 element with top padding to a element. This should answer it as well.
Try it with display: inline on h1 see the difference in behavior. inline element dont support vertical margins.
Fiddle: https://jsfiddle.net/dk_dragonknight/m8ey6mba/