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.
Related
I just started using Bootstrap and it's awesome so far. However I have one question, I created a content container and put a picture in it and I'm only going to have one in the row and I want it to go in the center of the page. I have tried a lot of things but to no avail, they don't work. Any help is appreciated! I'm also using Bootstrap version 3.3.6
This is my code for the container
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="random.jpg" alt="...">
<div class="caption">
<h3><center>I want the whole container in the center of the page.</center></h3>
</div>
</div>
</div>
</div>
</div>
Bootstrap has built in classes for you to use instead of the default tag. Try this for your image:
<img class="center-block" src="yourimage.png" />
Is there something like Bootstrap panels in MaterializeCSS?
Bootstrap panels here:
http://www.w3schools.com/bootstrap/bootstrap_panels.asp
The closest thing to a Bootstrap panel would be called card-panel in Materialize CSS.
Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css" rel="stylesheet"/>
<!--Card Panel-->
<div class="card-panel">
<span class="black-text">A Basic Panel</span>
</div>
Cheers
Panel and well are abonded by bootstrap in their upcoming v4.0
Bootstrap Developer Explains Here..
Basically Cards are much better replacements of panels and you can get same results in them.
<div class="row">
<div class="col s4">
<div class="card darken-1">
<div class="card-content ">
<span class="card-title">Card Title</span>
<p>I am a very simple card.
I am good at containing small bits of information.
I am convenient because I require little markup to
use effectively.
</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
however if you like the look and feel of bootstrap panel with different title background and different body background then you'll have to stick with bootstrap not materializecss
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.
I'm starting out a website using BootStrap 3 framework. Here's the section of the code that I have an issue with:
<div class="row">
<div class="col-md-8">
<div class="brand">
<h1>Test Text.</h1>
<div class="line-spacer"></div>
<p><span>Some more test Text</span></p>
</div>
</div>
<div class="col-md-12">
<img src="img/devices.png" />
</div>
</div>
</div>
Here's what the output looks like:
How do I get the image along the same row as the text? I tried placing the <img> within the col-md-8 div tag, tried without specifying any col div value, but none of that worked. Any help is appreciated. The CSS is the generic bootstrap min css.
You might want to split the area up in two parts, but always keep in mind that bootstrap standard uses 12 grid system.
So if you want the two next to each other u use...
<div class="row">
<div class="col-md-6">
Here your text
</div>
<div class="col-md-6">
<img />
</div>
</div>
That should fix your issue, remember up count goes over 12 it wraps.
Your columns have to always add up to a total of 12 and your code should be similar to the below:
<div class="container">
<div class="row">
<div class="col-md-4">
CONTENT
</div>
<div class="col-md-8">
CONTENT
</div>
</div>
</div>
Have a good read over the Bootstrap Docs on their Grid System:
http://getbootstrap.com/css/#grid
I am trying to convert my non responsive site to responsive using bootstrap. I am starting with the top banner. It is 1000px * 400 px. It has a login link on top right. Below that on the left there is a site title saying(my website title: slogan). And below that on the right there is search. I am able to implement it but confused about how to do it. My site is fixed container 1024px.
<div class="container" style="max-width:1024;width:98%" >
<div id="banner-holder" class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:right;">Login links</p>
</div>
</div>
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:left;">Site banner title</p>
</div>
</div>
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:right;">search box</p>
</div>
</div>
</div>
</div><!-- row holding bannder ends here-->
</div><!--container ends here-->
I have few doubts? Like is it okay to give three rows directly inside one row or should
I give an intermediate col-md-12 like given above?
Is this code the right way to do what I am trying to achieve or is there a better way and is this correct from
bootstrap rules.. I am new to bootstrap and I feel guilty I am not abiding by rules.
Like I mentioned in the comment, your nesting is correct but may be extraneous.
Simplified Markup
<div class="container" style="max-width:1024;width:98%" >
<div id="banner-holder" class="row">
<div class="col-md-12">
<div class="clearfix">
<p class="pull-right">Login links</p>
</div>
<div class="clearfix">
<p class="pull-left">Site banner title</p>
</div>
<div class="clearfix">
<p class="pull-right">search box</p>
</div>
</div>
</div><!-- row holding bannder ends here-->
</div><!--container ends here-->
To answer your question in the above comment:
is it necessary for col-md-* inside every row to add up to 12?
That is almost correct, the sum of col-md-* should not exceed 12 within a row in order to maintain the desired column layout on medium device resolution.
Note about offsets:
if you're using col-*-offset-*, make sure the sums of the cols and offsets does not exceed 12 within a row.