I have the following code in my HTML page. The links work fine when the browser window is maximized however, when I test the same on a mobile browser, the links become unclickable.
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-5">
<label>Legal</label><br>
Terms of Use<br>
Privacy Policy<br>
FAQs<br>
</div>
If I remove the bootstrap column classes from the DIV, the links again become clickable even on xs-screen. So I am sure that this is some issue with BS. Are there any workarounds for this?
Your disclaimer CSS is mixed in with the other two columns in the same row and overlapping the links.
(see how much room your disclaimer takes here: http://jsfiddle.net/93b1x26a/2/)
You need to add your disclaimer into a separate row. Something along the lines of: (now, I do not know how you want the disclaimer bit to behave, so I just gave you this code as a sample working alternative) -
See updated fiddle:
<div class="myfooter" id="footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-5">
<label>Legal</label>
<!-- contents of first col -->
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-7">
<label>More</label>
<!-- contents of second col -->
</div>
</div>
<!-- separate row for disclaimer -->
<div class="row">
<div class="col-md-8" id="disclaimer">
<label>Disclaimer</label>
<br>
<p>Placeholder text</br>
<p>
</div>
</div>
</div>
</div>
#ochi pointed out the issue . the #disclaimer div is overlapping on others because you gave col-xs=*,col-sm-*,col-md-* to other divs but forgot to give the same to this disclaimer div. so it is over lapping anchor tags.
part of code <div class="col-lg-12 col-md-8 col-sm-6 col-xs-4" id="disclaimer">
Working example
And your HTML is not in good format. syntax for break is <br /> and you didn't close p tag in disclaimer properly.
Related
Im making my website responsive for devices but i want to know if i can set a grid or margin/padding property for iphone so i can place it nicely and not 2 paragraphs in eachother.
I already tried to grid some text but it still looks weird in eachother this is my code:
<div class="row">
<div class="col-xs-1 col-lg-12">
Thisismy Test
</div>
</div>
You haven't tagged this as being a Bootstrap grid, but I'm assuming it is because of your grid classes.
You mention that you want to stop the navbar-brand text from wrapping on an iPhone so I'm wondering if there's there a reason why you wouldn't make the navbar-brand parent wider?
It looks to me as if it would need to be minimum col-xs-5
Here's a example showing both your existing HTML and the modification
https://codepen.io/panchroma/pen/OgQxBw
HTML
<div class="row">
<div class="col-xs-5 col-lg-12">
Thisismy Test
</div>
</div>
If you want to show the paragraph in entire row in mobile , use col-xs-12 class which will occupy the entire row space and display everything in one row in all th escreen sizes.
<div class="row">
<div class="col-xs-12">
Thisismy Test
</div>
</div>
If you want to display 2 paragraphs in row side by side use col-xs-6 for each div
<div class="row">
<div class="col-xs-6 col-lg-12">
Thisismy Test
</div>
<div class="col-xs-6 col-lg-12">
Thisismy Test
</div>
</div>
If you want to write your own CSS , you can do that by using media queries to define custom CSS for different screen sizes https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I have a page where container-fluid is the main div and then nav comes. After nav I have section where views loading in with row wrapping up content which is divided in columns or offsetted. But When I use a row class either on section or the div after , it is creating a gap between nav and page. Mainly adding it to container. But that is why we should be using container. And row is for columns so why still the gap?
<div class="container-fluid ng-scope" id="page-wrapper" ng-controller="homeCtrl as ctrl">
<nav><div class="container"></div></nav>
<section>
<div ng-controller="assumeIdCtrl as ctrl" class="row ng-scope">
<div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3">
</div>
</div>
</section>
Use default bootstrap's nav, you can copy the code from W3C.
Then make your structure correctly like, for example:
<nav> </nav>
<section class="container-fluid">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</section>
Check that there are different container types. div, nav, aside, section, footer, etc are containers by default. It's ok and awesome to use bootstrap, but we have to remember the default atributes of HTML tags before aply bootstrap.
Try with the default bootstrap's fixed nav.
I made an example of portfolio using it, you can check and inspect here:
portfolio example
it's very clean concerning js (only one jQ function if i dont remember wrong) and there's only a bit of handmaded css.
Is "jagged" the best descriptor here? I'm not sure. I think the following screenshot and mockup explains it well enough. Basically, how do I get the desired UI with Bootstrap 3?
Markup (truncated for brevity)
<div class="row projects">
<div class="project col-sm-4 text-center">
Project description and picture goes here.
</div>
<div class="project col-sm-4 text-center">
Project description and picture goes here.
</div>
<div class="project col-sm-4 text-center">
Project description and picture goes here.
</div>
</div>
<div class="row projects">
<div class="project col-sm-4 text-center">
Project description and picture goes here.
</div>
</div>
Actual
Desired
This isn't a default functionality of Bootstrap 3. You'll need an external JS library. My personal preference is Isotope - http://isotope.metafizzy.co/
Is there a reason to have multiple rows?
Why not one row and multiple project DIVs in each column? :
<div class="col-sm-4">
<div class="project">Project description and picture goes here.</div>
<div class="project">Project description and picture goes here.</div>
</div>.
Project class can have top and/or bottom margin set as needed.
I have html markup like below,
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
Some contents
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-12" >
Some Content
</div>
<div class="col-lg-5 col-md-5 col-sm-4 col-xs-12" >
Some Content
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 text-right" >
<div class="company-add-btn">+ Add more companies</div>
</div>
</div>
In large display's it works fine as single row structuring four divs in columns.
But in small displays I like to re-arrange the layout,
First div will get a complete row with full width
Third div will come before 2nd div and take a complete row with center aligned
2nd and 4th div will take a complete row with 2nd row stays at left, and 4th floated right.
Using bootstrap col-md-pull-* or col-md-push-* will just do the reordering inside a row. So that will not work.
One possible solution will be duplicating the markup for each media break points, but Isn't there any better approach then this ?
Can anyone suggest any way ? or point me a good place to start looking for solution ?
I recommend (even though it's dirty) adding your view twice, once in a
<div class="hidden-lg hidden-md hidden-sm">Your content for the XS-grid.</div>
and for the other 'layout
<div class="hidden-xs">Your content for everything but XS-grid.</div>
Hope that helps (looking forward to a better solution ;)).
what you are talking is placing third column before second column and assign it the complete width, bootstrap will not do this.
This can be done only if these columns are to be shown as a single row with pull-let and pull-right. The only option you have is to duplicate the markup in this case, or write down your own css for placing third column before the second one(but this would be not a good idea).
You could hide the second div on small screens; the third div would then be in second position. You would then have to duplicate just the second div after the third and show on small screens only, then do the pull-left and right on the last two divs. Something similar this might work (this example is for small):
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
Some contents 1
</div>
<div class="col-lg-1 col-md-1 hidden-sm col-xs-12" >
Some Content 2
</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12" >
Some Content 3
</div>
<div class="visible-sm col-sm-9 lefty" >
Some Content 2 - duplicate
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 righty" >
<div class="company-add-btn">+ Add more companies</div>
</div>
</div>
The use of col-xs-12 is really unnecessary in this case, and in most cases, the column will be 100% below the last col class used.
DEMO: https://jsbin.com/nuhoba
It would be better if you had a graphic to describe what you want. If I followed correctly, then you would order your html in the order it is on a small viewport then -- if the column is in the same .row and the .row is no more than 12 columns, you can push and pull left and right. You have to add up to 12 columns per row at any given column class, I've used col-sm-X for simplicity. If you play around with col-md and/or large that means that you have to use those columns on the others but it need to add to 12 at that min-width.
HTML:
<div class="container">
<div class="row">
<div class="col-sm-3">
A
</div>
<div class="col-sm-4 col-sm-push-2 text-center-xs">
C
</div>
<div class="col-sm-2 col-sm-pull-4">
B
</div>
<div class="col-sm-3 text-right">
<div class="company-add-btn">+ D</div>
</div>
</div>
</div>
CSS
#media (max-width:767px) {
.text-center-xs {text-align:center;}
}
I have a section that reads left to right in bootstrap step up. What I am trying to do is get the right section to appear ontop of the left one in mobile view. I attempted using the push/pull methods but they seem to just push my content off the page.
Here is what I have
<div class="row process-page wow animated fadeInRightBig animation-delay-2"><!-- Create row col-6 -->
<div class="col-xs-push-12 col-md-6 col-sm-6">
<h3 class="title margin-b-30">Title</h3>
<p>Content</p>
</div> <!-- end col-6 -->
<div class="col-xs-pull-12 col-md-6 col-sm-6 clipB" >
<h3 class="title margin-b-30 margin-l-30"></h3>
</div>
</div> <!-- end Row -->
So it looks fine in large/medium, however mobile I cannot seem to get them to switch places (top to bottom)
Here is what I Mean
Desktop :
[A][B]
to mobile
[B]
[A]
I thought the push/pull would do the trick if i pushed the top one 12 and pulled the bottom one 12, but all it does it push them both off the screen.
You are using push and pull in the wrong way, you need to use that for the sm view. Try this:
First change the order in HTML and then use right the push and pull
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<p>B</p>
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6" >
<p>A</p>
</div>
</div>
Check this Demo
Just push-12 means offsetting by that amount. Use pull-left and pull-right instead.