I'm recently started to work with bootstrap and i really like it, very easy and strcutured.
Although i dont understand one thing, what is the correct structure?
I've read their getting started and they said for example the the first child of row can be column ...
But they also mentioned about div='container', should then also all of the elements be in a container?
for example
<div class="container">
<nav> </navr>
</div>
<div class="container">
<div ....> BODY </div>
</div>
<div class='container">
<footer></footer>
</div>
Or are all of this containers very optional and can be left not used?
Same question about rows, should then all column elements be a part of row or not?
I have following structure:
<nav></nav>
<row>
<div class="col-md-2> </div>
<div class="col-md-10">
<row>
<div class="col-md-6"> </div>
<div class="col-md-6"> </div>
</row>
</div>
</row>
Is this the correct structure?
Since row has negative margins, it should be placed inside container..
According to the Bootstrap docs (http://getbootstrap.com/css/#grid):
"Rows must be placed within a .container for proper alignment and padding."
As you'll see in this demo, the non-contained row causes a horizontal scrollbar:
http://bootply.com/106752
But, container can be used anywhere.. alone, or nested inside other containers / rows.
Related
I've read a lot about bootstraps breakpoints and grid system now and perused many stackoverflow questions but remain bamboozled.
I have a simple bootstrap v3 container like this:
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5">
image
</div>
<div class="col-md-7 d-flex">
text
</div>
</div>
</div>
And in a web browser this renders beautifully, but on my phone the image and text continue to occupy one row with no break and the image is thus scaled tiny and ugly and I'd like Bootstrap to do what it does best, render that image at the full phone width and the next beneath it, that is, break these two columns.
A live sample is her, at present:
http://hobart.gamessociety.info/
and I would be most grateful if anyone with experience could lend some insight into why this doesn't render as I'd like on my phone.
As I understood bootstrap it's phone first, and md says apply the 5/7 split on medium and larger screens and on smaller ones do what it does sensibly, i.e. not scale that image to tiny proportions and show both columns side by side, but break between them and show one above the other.
The class "vertical-align" adds the css style "display:flex" if you remove that you will see the items behaving as you currently desire (I think). Use chrome and inspect to add/remove css styles.
You could just add col-xs-12 to each div class.
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5 col-xs-12">
image
</div>
<div class="col-md-7 col-xs-12 d-flex">
text
</div>
</div>
</div>
Here is an alternative to your second question
create a css class
.myClass {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}
And add it to the inner divs
<div class="container">
<div class="row">
<div class="col-md-5 myClass">
image
</div>
<div class="col-md-7 myClass">
text
</div>
</div>
</div>
Found the answer here Twitter Bootstrap 3, vertically center content
Condider the following snippet:
<template v-if="tryIsMobile" >
<div class='device device-mobile-portrait' :class="deviceClass">
<div class="device-scroller-container">
<div class='device-scroller'>
<img id='tryit-img-mobile' :src="srcUrlMobile" v-on:load="onImgLoad" v-on:error="onImgError"/>
</div>
</div>
</div>
</template>
<template v-else>
<div class='device device-tablet-landscape' :class="deviceClass" >
<div class="device-scroller-container">
<div class='device-scroller'>
<img id='tryit-img-tablet' :src="srcUrlTablet" v-on:load="onImgLoad" v-on:error="onImgError"/>
</div>
</div>
</div>
</template>
This code conditionally renders one of the two images. Some user action results in the actual shown image to be toggled.
What I'm seeing is the following: When toggling from say, tryit-img-mobile to tryit-img-tablet, the image loaded as part of tryit-img-mobile will get displayed with different dimensions instantly. However, during the time the image loads it's new source :src="srcUrlTablet", the image with src :src="srcUrlMobile" still displays.
This is probably due to Vue using the same img-tag for both the templates. How can I prevent Vue from doing this, and instead use seperate img-tags?
In cases such as this, Vue uses a special key attribute that tells it not to reuse the same element. Give each element this attribute with a unique value, and Vue will no longer reuse the same element:
<div v-if="tryIsMobile"
class="device device-mobile-portrait"
:class="deviceClass"
key="mobile"
>
...
</div>
<div v-else
class="device device-tablet-landscape"
:class="deviceClass"
key="tablet"
>
...
</div>
I have just started working on turning a graphic design into a responsive website using Bootstrap 3. I would like to know the positioning of the .container in relation to other wrappers like, e.g. <nav>, <header>, <footer> or semantic custom wrappers like, e.g <div class="main-content">, etc.
I am not sure if I should wrap the above mentioned tags in the .container div or vice-versa - wrap the .container div in those tags.
Essentially, the question is whether the following are equal or there is a preference of order:
<div class="container">
<div class="main-content">
...
</div>
</div>
<div class="main-content">
<div class="container">
...
</div>
</div>
If it depends on the project specifics what markup to choose, what might be potential reasons for choosing one over the other?
I personally use following order
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- NAVIGATION -->
</div>
</nav>
<div id="content" class="container">
<!-- (MAIN)CONTENT -->
</div>
<footer>
<div class="container">
<!-- FOOTER -->
</div>
</footer>
</body>
so I can style the navigation nav and footer footer over the full width (e.g. background) and the content still offers the grid.
EDIT : It is based on Template Business Casual.
If you wish to style everthing to the same (responsive .container-)width you should better put everything inside the .container. This also depends on your CSS behind .main-content.
Maybe you could check the different examples (source code) from bootstrap to see which setting/design matches your preferences.
I am getting up to speed with Bootstrap's grid system but the following example confuses me. In the following there are two (2) column classes - col-xs-5 and col-lg-1 - for each div with class form-group
<div class="container-fluid">
<form role="form">
<div class="row">
<div class="form-group col-xs-5 col-lg-1">
<label>
Name
</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5 col-lg-1 ">
<label>
Email
</label>
<input type="text" class="form-control input-normal" />
</div>
</div>
</form>
</div>
Can someone explain why this is done?
Each column class describes how many columns the element will take up at that designated breakpoint. For example:
<div class="form-group col-xs-5 col-lg-1 ">...</div>
This element will take up 5 columns if the page is being rendered at the xs breakpoint (screen width of <768px) but will only take up one column at the lg breakpoint ( >1200px )
This lets you set the presentation of the same element at different screen widths.
For each row you have one column.
It's set to five columns wide for extra small to medium screen sizes with by "col-xs-5" and one column for large screen sizes with "col-lg-1". By default with bootstrap you can set four different layouts (extra small, small, medium and large) to suit different screen sizes.
If you make your browser window size smaller you will see how it effects it.
See http://getbootstrap.com/css/#grid for information on how the grid system works.
It's well worth reading though the documentation as it's very good. See http://getbootstrap.com/css/
I've been using Bootstrap for a while (specifically, version 3) and have noticed that I still am unsure whether I should always close columns with a that has a class of .row assigned to it after every 12 columns OR can I wait and apply that closing .row at the end of my code as long as I understand that any columns that add up to more than 12 columns in a single row will simply wrap automatically onto a new line. The benefit of the latter option is that it would be less code and less chances of forgetting to add that closing div tag for each 12 column row.
In other words, is it better to do this?
<div class="row">
<div class="col-md-8">
<p>some content here</p>
</div>
<div class="col-md-4">
<p>some content here too</p>
</div>
</div><!--/.row-->
<div class="row">
<div class="col-md-6">
<p>some content here</p>
</div>
<div class="col-md-6">
<p>some content here too</p>
</div>
</div><!--/.row-->
OR, is this method more efficient?
<div class="row">
<div class="col-md-8">
<p>some content here</p>
</div><!--/.col-md-8-->
<div class="col-md-4">
<p>some more content here</p>
</div><!--/.col-md-4-->
<div class="col-md-6">
<p>some content here</p>
</div>
<div class="col-md-6">
<p>some content here too</p>
</div>
</div><!--/one .row div to close them all-->
...well, it actually depends on the design - I am using both depending on the circumstance.
The difference lies in the height of the elements. If the two cols in the first row had different heights, closing the row would essentially mean that the two bottom columns would be aligned starting from the same top position.
However if the cols have different heights NOT closing the row can have different results.
edit: ...this is because of the way float works on the cols elements. Closing a row clears the float.
edit2: here is an example of both cases:
not closing row:
<div class="row">
<div class="col-">
content
</div>
<div class="col-">
content
</div>
<div class="col-">
content
</div>
<div class="col-">
content
</div>
</div>
http://jsfiddle.net/b2rkgd5w/1/
closing row:
http://jsfiddle.net/1krj49pm/2/
besides closing the row element the rest of the code is exactly the same.