twitter-bootstrap


How do I properly use the Bootstrap Grid System Layout in my EmberJS App


I'm wondering if anyone has found a way to implement Bootstrap's Grid Layout system in their Ember JS app.
I've tried Ember Bootstrap, but they don't have the grid system included. I also tried other NPM packages such as Bootstrap 3 Grid and Bootstrap 4.
What am I doing wrong that grid layouts won't display properly within my project?
I also had the following HTML wrapped in a <div class="row"> for the columns but that didn't work at all either.
{{#each model as |phone|}}
<div class="phone">
<div class="col-md-12">
<div class="phone-header">
{{phone.make}} {{phone.model}}
<small>{{phone.trim}}</small>
</div>
</div>
<div class="col-md-4">
Option 1
</div>
<div class="col-md-4">
Option 2
</div>
<div class="col-md-4">
Option 3
</div>
</div>
{{/each}}
With clear fix:
{{#each model as |phone|}}
<div class="phone">
<div class="col-md-12">
<div class="phone-header">
{{phone.make}} {{phone.model}}
<small>{{phone.trim}}</small>
</div>
</div>
<div class="row">
<div class="col-sm-4">
Some Item Column
</div>
<div class="col-sm-4">
Some Item Column
</div>
<div class="col-sm-4">
Some Item Column
</div>
{{twbs-clearfix columnCount=3 index=index visible-sm=true visible-md=true visible-lg=true}}
</div>
</div>
{{/each}}
I made sure my CSS and JS were imported properly, however I still don't get a grid layout when trying to layout items.
What am I missing?
Or should I just build a flexible layout the old way by hand?
Thank you for your time
Need to wrap those divs with <div class="row">
<div class="phone">
<div class="row"><!-- add this to specify the row -->
<div class="col-md-6">
<div class="phone-header">
{{phone.make}} {{phone.model}}
<small>{{phone.trim}}</small>
</div>
</div>
<div class="col-md-2">
Option 1
</div>
<div class="col-md-2">
Option 2
</div>
<div class="col-md-2">
Option 3
</div>
</div>
</div>
Maybe definition is not clear at bootstrap guides. You may want to look to the examples
Grid has totally 12 column.
You need to remember to include bootstrap in your code!
Normally when I start an ember CLI project I do the following:
install ember-cli-sass (You could use less instead!)
install ember-bootstrap
rename app.css to app.scss (Sass extension for css)
Put the line #import "ember-bootstrap/bootstrap"; right at the top of the app.scss file
I'm sure there is other methods of doing this, however I don't know them offhand!
After trying multiple NPM packages for Bootstrap installs for Ember, I finally just decided to download the source file from Bootstrap 4, add the original bootstrap-grid-min.css.
Go to my app.css then add: #import url("bootstrap-grid.min.css"); above my secondary custom css. I'm sure there are more productive options but this option works.

Related Links

How to Reduce the font size of Morris Donut graph?
stacking order in bootstrap
Bootstrap selectpicker + mCustomScrollbar not working as expected
php if no image make bootstrap colulmn col-md-12
Collapse horizontal Bootstrap 3 navbar to a stacked one
Bootstrap carousel: how to lower the bottom circle indicators?
Bootstrap navbars collapse
Bootstrap: Remove form field border
Convert a Bootstrap site to an Orchard module
grunt-contrib-sass not compiling css file
Disable bootstrap for small resolution
Dynamic Bootstrap website using Joomla's BackOffice
Navbar dropdown not working on mobile devices
Inline form elements within non-inline form in Bootstrap 3?
Google Charts overflow with Bootstrap
load local bootstrap css and js if load fail from remote

Categories

HOME
postgresql
kendo-ui
intellij-idea
typo3
microcontroller
aix
glsl
localhost
virtualhost
webpack-dev-server
box-api
soap-client
dcos
google-app-maker
adroitlogic
guidewire
comma
eclipse-orion
google-closure-compiler
ibatis
spring-webflow
monad-transformers
suitescript
continuous-fourier
csproj
cqlsh
folder
overflow
ilog
flex3
maven-2
nsdateformatter
julia-jump
tapply
quartz
mtm
superclass
head
stanford-nlp-server
skype-bots
audio-fingerprinting
aws-rds
seyren
multi-select
wicketstuff
turbolinks
toggleclass
ldd
networkstream
particle-system
gdi
usps
apache2-module
nslocalizedstring
ruby-1.8.7
gulp-cdnizer
jsoncpp
callfire
polarion
clearquest
glog
data-representation
strcpy
pymol
esri-arc-engine
caption
iphone-6
dojox.grid
react-os
ccmenuitem
atg-dynamo
lettuce
image-preloader
dayofweek
object-oriented-database
boofcv
netbeans-plugins
svg-android
nokogiri
kademlia
dnsbl
idoc
volatility
m3u
states
reflexil
jqzoom
service-layer
llblgen
virtual-destructor
oaw
high-load
hotfix

Resources

Encrypt Message