I have several elements I want to display on a page, and I am using Angular's ng-repeat to do it. I want to display it by having a 3x3 column, so I am using Bootstrap's col-md-4. My HTML is as follows:
<div ng-controller="resourcesController">
<div class="main-body">
<div class="container-fluid">
<div class="resources">
<div ng-repeat="org in orgs" class="col-md-4">
<img src={{org.icon}}>
</div>
</div>
</div>
</div>
</div>
However, the elements are appearing like so:
How can I center the elements and spread them over evenly across the page while using ng-repeat? Thank you!
My suggestion would be that it is not enough to use only one ng-repeat.
Instead, you could separate your orgs array into an array of arrays representing rows of columns.
Then you could modify the code similarly to below (making it easier to apply the grid format you want):
<div ng-repeat="orgRow in orgRows" class="rowClass">
<div ng-repeat="orgElement in orgRow "class="columnClass" >
<img src={{org.icon}}>
</div>
</div>
A simple bootstrap helper class text-center should do most of it for you
<div ng-repeat="org in orgs" class="col-md-4 text-center">
In addition could add class to the <a> tags and:
a.content-class{display:block; text-align:center}
Related
I am using Twitter Bootstrap for my grid system. I have a JS script that gets a list of items from an XML file. Every item that I get from this file should be inserted into the grid with it's own column. To make it easier to insert these items into the DOM, I use a div called news-results and just append it each time the script loops through the next item in the XML.
<div class="container">
<div class="row">
<h1>Recent News</h1>
<div id="news-results">
<div class="col-lg-4 col-md-6 col-sm-12 col-12">
<div class="card">
<div class="card-body">
<h3>{news_title}</h3>
<p>{news_body}</p>
<div class="card-footer text-muted">
<div class="card-link">
<h6>Posted on {news_date}</h6>
</div>
<div class="card-link">
Read More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem with this is that the news-results div seems to be affecting the layout of the grid. The cells stack on top of each other instead of the way they should be. If I copy the HTML of only the newly inserted news items and insert it into the page without the news-results div, it works fine.
Is there an element I can use to easily identify to the script where in the page the elements should be inserted?
Here is a JS fiddle to demonstrate. If you remove the news-results tag, you'll see what I mean.
I found a solution that works for me.
#news-results {
display: contents;
}
It basically makes the div act as strictly a placeholder for the content HTML.
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>
There is a lot of tutorial about bootstrap elements.
But I want to know where I must use nav/header/container/row/well/panel/section
for example..Do it needs use row for column 12?
1- currently I do it this way:
<body>
<div class="container-fluid"> /*only for top navbar*/
<nav>
</div>
<div class="container"> /* for body */
<header></header>
<main class="row">
<div class="col-md-2"></div>
<div class="col-md-5"></div>
<div class="col-md-5"></div>
</main>
<footer class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</footer>
</div>
</body>
Is it true?
2- Is this format true or necessary?
<div class="row">
<div class="col-md-12"></div>
</div>
3- which one is standard?
<div class ="well">
<div class="row"> <div class="col-md-*"></div> </div>
</div>
or
<div class ="row">
<div class="well"> <div class="col-md-*"></div> </div>
</div>
4- dose it need use "container" class for all section or only for parent section?
for 1:- yes it's a correct method. whenever you want to use bootstrap column classes like col-xs-12 in their first parent you must put class " row ".
for 2:- this is true. method also accessory.
for 3:- first option is correct.
for 4:- depends of need of page design. if all site are in same container with then you can put it in parent class.
All options you mentioned are correct.
However, below written structure makes sense. That means if you are using col in container or container-fluid it should be in row.
<div class="container">
<div class="row">
<div class="col-*-*">
</div>
</div>
</div>
If anytime you want to check how well your bootstrap is written, you can check it on http://www.bootlint.com/
But I want to know where I must use nav/header/section/footer
Well all these fields are only for semantic purpose, actually they all could be div. In the future or even now it is best practise for SEO to use nav for navigation, footer for the footer etc. For example header should be used to introduce content, it often contains <h1> - <h6> tags.
There are many informations to this in the web, here is a reference
All the other bootstrap classes are just styles which you could apply by yourself. A container for example can be used once for all of your content if you never need a full width element, but sometimes you have a situation where you need a full width element (f.e. an image) then you dont want to wrap all of your content into container.
Here you want to use multiple containers and not one for everything (Fiddle)
Hope this helps you a bit.
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.
I have tried using the row class but it was not solving the problem. I am just trying to take two divs and put them next to each other using only bootstrap and not css. (It's a corner case where I can't add any css) Is there a way to do this?
Basically I have this:
<div class="OuterMostClass row">
<div class="outerClass">
<button class="btn">button1</button>
</div>
<div class="outerClass2">
<button class="btn">button2</button>
</div>
</div>
And I want the two buttons to be next to each other and due to limitations I can't add any css other than bootstrap. Is this possible?
Your code sample doesn't show a parent div with the container or container-fluid class and your columns are missing size classes.
Try this:
<div class="container">
<div class="OuterMostClass row">
<div class="outerClass col-xs-6">
<button class="btn">button1</button>
</div>
<div class="outerClass2 col-xs-6">
<button class="btn">button2</button>
</div>
</div>
</div>
The answer is to add the pull-left class to the buttons but as Matthew points out adding a container makes it easier to take care of other spacing