I am trying to figure out how to get an image/map or whatever, in this case a map, displayed to the right side of my form.
This image shows what I want it to look like. It will be a dynamically generated Google map however.
Here is my current code for the form itself via bootply.
Bootply Example
Thanks!
You need to add another wrapper row and column inside your container.
<div class="row">
<div class="col-md-8">
<!-- Your Form Here-->
</div>
<div class="col-md-4">
<!-- Your Image here-->
</div>
</div>
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
I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<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
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/
I have two columns:
<div class="col-md-9">
...main content here
</div>
<div class="col-md-3">
...sidebar content here
</div>
I want the col-md-3 on the right side until the first breakpoint then on top thereafter at smaller viewports. I played around with pushing and pulling columns, but couldn't figure out how to display correctly. Please advise.
This should do it. Demo
The idea is that the top div will always break above. Since we want the top div in the right position we push it to the right by the offset of the other column which is 9. Then we pull the bottom div back 3 columns to put it in the left position.
<div class="col-md-3 col-md-push-9">
...sidebar content here
</div>
<div class="col-md-9 col-md-pull-3">
...main content here
</div>
I'd like to put a stack of divs inside a single Bootstrap 3 column.
Specifically I want to layer a loading progress gif image on top of the image that is being loaded.
However simply placing the image tags inside a Bootstrap column and setting the CSS z-order doesn't work.
<div class="container">
<div class="col-xs-4 left">Left Col</div>
<div class="col-xs-4 imageholder">
<img class="center-block" src="http://paulsmedia.s3.amazonaws.com/public/lgspinner.gif" width="40px" height="40px" style="z-index:999"/>
<img class="center-block" src="http://paulsmedia.s3.amazonaws.com/public/yeoman.png" style="z-index:-1"/>
</div>
<div class="col-xs-4 right">Right Col</div>
Plunk : http://plnkr.co/8T7hyb900g3d4z9IO6Ta
Is there a way to achieve this and retain responsive behaviors?
You could use absolute positioning for <img> tags
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.