I have the following code
<div id="profile" >
<div class"row">
<div>
</div>
<div id="principal">
<div class="row">
</div>
</div>
I need one div to be at the left and the other div to the right using Bootstrap 3.1.1 or css without forgetting responsive design.
Thanks.
See if this works for you!
<div id="profile" class="span4"> // class="column-sm-4"
<div class"row">
</div>
</div>
<div id="principal" class="span8"> // class="column-sm-8">
<div class="row">
</div>
</div>
Related
how to do something like that with bootstrap?
img cuz I do not know how to describe it
You can use Bootstrap grid to achieve this
<div class="row">
<div class="col-6">div-1</div>
<div class="col-6">
<div class="row">
<div class="col-12">div-2</div>
<div class="col-12">div-3</div>
</div>
</div>
</div>
You can try something like this:
<div class="container">
<div class="row">
<div class="col">
div 1
</div>
<div class="col">
<div class="row">
<div class="col">
div 2
</div>
</div>
<div class="row">
<div class="col">
div 3
</div>
</div>
</div>
</div>
</div>
Can someone please give me a simple example of html and css that I need to have to create something like this picture using bootstrap?
website template like this image
I searched the web but cannot find a simple example!
(for bootstrap v3.3.7 in asp.net mvc project)
Here is a code for You, enjoy!
<div class="row">
HEADER
</div>
<div class="row">
<div class="col-md-4">
SIDEBAR
</div>
<div class="col-md-8">
<div class="col-md-12">
content1
</div>
<div class="col-md-12">
content2
</div>
</div>
</div>
<div class="row">
FOOTER
</div>
This is the complete and corrected answer:
<div class="row">
<div class="col-md-4"> HEADER </div>
</div>
<div class="row">
<div class="col-md-4">
SIDEBAR
</div>
<div class="col-md-8">
<div class="col-md-12">
content1
</div>
<div class="col-md-12">
content2
</div>
</div>
</div>
<div class="row">
<div class="col-md-4"> FOOTER </div>
</div>
I am trying to get the image and content side by side in the layout. Something like the way they have done it here. I have tried the bootstrap grid layout for doing it but I am just not getting it right plus it is not responsive.Can someone please help me out with this.
Here is the skeleton of the code:
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6">
<div class="col-lg-2">
<img src=""/>
</div>
<div class="col-lg-4">
<div><h4></h4></div>
<p class="text-muted"></p>
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-2">
<img src=""/>
</div>
<div class="col-lg-4">
<div><h4></h4></div>
<p class="text-muted"></p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
//image here
</div>
<div class="col-md-8">
//text here
</div>
Hope this helps!
I have a two columns one column is size 9 and other column is size 3. I have a Google Map inside col-3 but my map is at the bottom of the screen. How do I get it to move up?
<div class="container">
<div class="row">
<div class="col-sm-9">
content....
<div class="col-sm-3">
content...
</div>
<div>
</div>
</div>
You have your col-sm-3 nested within your col-sm-9
Try this:
<div class="container">
<div class="row">
<div class="col-sm-9">
content....
</div>
<div class="col-sm-3">
content...
</div>
</div>
</div>
If I understand your question correctly, you want the divs stacked with the 3-column div on top. If so, do it like this:
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-pull-3">
content....
</div>
<div class="col-sm-3 col-sm-pull-9">
content...
</div>
</div>
</div>
I want to create a 2 column image grid similar to this example.
I'm looking for suggestions on how to best achieve this using the Twitter Bootstrap grid? I've attempted to do this with not much success. My main issues were the gutter between images being uneven, not being able to align the images on the center line of the page, and how to handle both portrait and landscape images. Thanks in advance.
Edit: As recommend I have supplied an example with a screenshot of the result.
<div class="container">
<div class="row">
<div class="span12">
<div class="row">
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
</div>
<div class="row">
<div class="span8"><img src="http://goo.gl/mrllo"></div>
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
</div>
<div class="row">
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
<div class="span8"><img src="http://goo.gl/mrllo"></div>
</div>
</div>
</div>
</div>
The first row of span4's are perfectly aligned however, the bottom of the span4's in the second two rows are not aligning to the bottom of the span8 as the image illustrates.
Ok seems as if reading up upon nesting columns in bootstrap will help you on this one, what you are trying to achieve is relatively straight forward, just takes time to figure it out
http://twitter.github.com/bootstrap/scaffolding.html#responsive
I have tried this and it works, though you just need to put the appropriate images in their place as they are all different sizes
<div class="container">
<div class="row">
<div class="span8">
<img src="http://example">
</div>
<div class="span4">
<img src="http://example">
</div>
</div><!--row-->
</div><!--container-->
<div class="container">
<div class="row">
<div class="span6">
<img src="http://example">
</div>
<div class="row">
<div class="span6">
<img src="http://example">
</div>
</div><!--row-->
<div class="span6">
<img src="http://example">
</div>
</div><!--row-->
</div><!--container-->
<div class="container">
<div class="row">
<div class="span9">
<img src="http://example">
</div>
<div class="span3">
<img src="http://example">
</div>
<div class="row">
<div class="span3">
<img src="http://example">
</div>
</div><!--row-->
</div><!--row-->
</div><!--container-->