I am designing a website using the responsive Bootstrap framework.
I have 3 content areas next each other (horizontally). If I have a small display, these 2 contents are under each other (typical responsive design).
Now I want to add a <hr/> after each content block that is under each other.
<div class="row-fluid content">
<div class="span4">test1</div>
<div class="span4">test2</div>
<div class="span4">test3</div>
</div>
This is the whole code for a big display.
On some displays there are 2 blocks horizontal and 1 block under the 2 blocks.
Then I want to insert a <hr/> between the 2 lines.
Bootstrap provides classes to manage the visibility of any element by device, based on media queries. You have to place <hr/> elements wich are only visible in specific viewports:
<div class="row-fluid content">
<div class="span4">test1</div>
<hr class="visible-phone"/>
<div class="span4">test2</div>
<hr class="visible-phone"/>
<div class="span4">test3</div>
</div>
Check the documentation for more Responsive utility classes.
Related
I am a complete beginner and I am learning Bootstrap. I want to know how to determine which column system I need to use in my website. Suppose I have a row with 3 columns. Now I have 3 options.
Option 1:
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
Option 2:
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
</div>
Option 3:
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
Now my question is, As I want my website to be responsive which class I need to apply. I want my website to render properly irrespective of device selected. I understood that they are meant for different devices. Does that mean, I need to write 3 different css style code (I doubt it). So, what shall I put in my code?
P.S: I saw this link SO LINK and I understood it. But still I am confused, what to put in my code? Shall I put sm,lg or md?
These define the width of the screen at which the layout will collapse. For example, in .col-md-, the layout will be horizontal until the screen width is less than 970px, at this point, the layout will collapse. However, if you use .col-lg-, the layout will be horizontal until the screen width is less than 1170px, then it will collapse.
Bootstrap has 4 breakpoints, .col-xs-, .col-sm-, .col-md- and .col-lg-. You should use these depending on the content of the div. The best way to become familiar is to play around with each one and notice that the layout collapses at different points for each one when you decrease the width of your window. So to answer the question, you should choose whichever one collapses correctly for the content of your div. Hope this helps.
For a more detailed guide on the bootstrap grid system, take at look at this: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
I found it helpful to get a good understanding.
I generally use col-md prefix, so I guess your first option would work quite fine: col-md-4.
To add to the other suggestions you've received, remember that you can apply multiple Bootstrap column classes to the same div.
For example say you wanted 3 equal width columns on a wide viewport. Then as the viewport narrows this changes to one full width header with two equal width columns below, and on smartphones all three divs are stacked vertically, then you might use something like
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">column1
</div>
<div class="col-lg-4 col-md-6">colmun2
</div>
<div class="col-lg-4 col-md-6">column3
</div>
</div>
</div>
See this live https://codepen.io/panchroma/pen/EwVwpw
Or you might want to change the relative widths of your 3 columns at different viewports
<div class="row">
<div class="col-lg-6 col-md-4">
</div>
<div class="col-lg-3 col-md-4">
</div>
<div class="col-lg-3 col-md-4">
</div>
</div>
Or you might want to hide one of the columns at narrower viewports
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4 hidden-sm hidden-xs">
</div>
</div>
The important thing is that you can mix and match your classes to achieve the responsive behaviour that you need.
Once you get the hang of the grid sizing options you might also want to check out how to reorder columns. What often happens is that you need to have a different column order on desktop and mobile, and there will probably be times when you want to offset columns as well.
Good luck!
Here is where my code is now:
link
Here is the design I am trying to achieve:
Picture of design
I've tried position relative and margins however the methods I've used ended up compromising the responsiveness of my page. What is the best way to position these elements in the above design while still keeping the webpage able to adapt to a change in screen size?
You can use bootstrap for getting responsive designs. When you use bootstrap you can use the grid system to manage your elements. class "row" will get you a grid divided into 12 equal columns. You can then use col-md-x/col-sm-x depending on you design to position your elements. You can refer to http://getbootstrap.com/css/ to learn further. In other word use col-md-3 to display image and col-md-9 for information. It will work.
Example just for reference:
<div class="row">
<div class="col-md-3">
<img /> <-- put your image here -->
</div>
<div class="col-md-9">
<-- put your texthere -->
</div>
</div>
<div class="row">
<div class="col-md-9">
<-- put your texthere -->
</div>
<div class="col-md-3">
<img /> <-- put your image here -->
</div>
</div>
Here is my Bootstrap 3 jsFiddle, although you'll likely need to view it in full screen view in order to see it in all its glory.
As you can see, there are two TB3 "wells" called Herps and Derps. They are currently sitting on top of one another, and furthermore, they are wider than the navbar, jumbotron and footer wells.
I'd like these to both be next to each other on the same line/"row", and I'd like the two wells to be the same width of all the other contents. I'd also like to have a bit of padding (spacing) between the two wells so that they're not smushed right up next to each other.
My best attempt (from that jsFiddle above):
<div class="row">
<div class="span6">
<div class="well">Herps</div>
</div>
<div class="span6">
<div class="well">Derps</div>
</div>
</div>
...does not seem to be doing the trick. Any ideas where I'm going awry?
You need to use the col-x-y css styles for your wells for the appropriate screen size and columns. In this case, you could use col-sm-6 since you have two columns.
<div class="row">
<div class="col-sm-6">
<div class="well">Herps</div>
</div>
<div class="col-sm-6">
<div class="well">Derps</div>
</div>
</div>
JSFiddle
Bootstrap Grid System
I'm making a web app which should list objects gathered from json in a tile-based list (kinda like shopping store), where every tile is a div. What is the best way to do that in Bootstrap ? I'm using Angular and I want to do it with a help from ng-repeat directive. If the number of divs exceed view area, scroll bar should appear.
This is graphical view, how I want it to look like.
What is actually the best way to implement that?
Thanks in advance.
You can use the regular bootstrap grid system
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
The width of the page is 12 units, so divs of width 4 will give you 3 columns. If you keep adding divs with a total width of more than 12, it will be placed in diferent rows.
In the example I gave you, you should get exacly 2 rows with 3 elements in each.
<div class=container>
<div class="row">
<div class="col-sm-4" ng-repeat="tile in tiles">
<div class="panel panel-default">
<div class="panel-header">
{{tile.header}}
</div>
<div class="panel-body">
{{tile.body}}
</div>
</div>
</div>
</div>
</div>
Something like this maybe? I use col-sm-4, that way 3 tiles can be visible in a row. When the screen becomes smaller, then 700-something, it will be layed upon eachother instead.
Use bootstraps grid system. Put all the divs in a container with .row class and mark the ng-repeated div with .col-sm-4 Add max-width: and overflow: auto to your container so you get the scrolling.
Im using the newest twitter bootstrap to construct a responsive grid website. i have three divs across a responsive grid like so:
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
...and this works as intended via the bootsrap documentation. However I have a separate background color on these divs from the html body background color, and when i drag the browser window to a smaller width to "collapse" the divs to show on top of each other, the gutter space between them disappears (creating a look of one big div versus three separate ones) is there anything i can do to create some gutter space between the divs when the width gets small enough to cause them to stack vertically?
You have a couple options...
(1) You could define a class and apply it to any divs you want to have a bottom margin.
In your application.css (or similar):
.mb10 {margin-bottom:10px;}
In your html page:
<div class="row-fluid">
<div class="span4 mb10">....</div>
<div class="span4 mb10">....</div>
<div class="span4 mb10">....</div>
</div>
OR
(2) You could make sure you wrap your div.span4 content in <p></p> tags.
<div class="row-fluid">
<div class="span4"><p>....</p></div>
<div class="span4"><p>....</p></div>
<div class="span4"><p>....</p></div>
</div>
From the Bootstrap - Typography section:
http://twitter.github.io/bootstrap/base-css.html#typography
In addition,
<p> (paragraphs) receive a bottom margin of half their line-height
(10px by default).