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!
Related
How can I make the image clickable so I can be redirected to other asp net page?
<div class="banner-section spad">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<div class="single-banner">
<img src="img/banner-1.jpg">
<div class="inner-text">
<h4>Homem</h4>
</div>
</div>
</div>
</div>
</div>
just wrap image into anchor tag
<div class="banner-section spad">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<div class="single-banner">
<img src="img/banner-1.jpg">
<div class="inner-text">
<h4>Homem</h4>
</div>
</div>
</div>
</div>
</div>
<div class="banner-section spad">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<div class="single-banner">
<img src="img/banner-1.jpg">
<div class="inner-text">
<h4>Homem</h4>
</div>
</div>
</div>
</div>
I am trying to generate the following layout in bootstrap 3 css but the side bar is always small and it does not properly scale up and there is issues in mobile mode how do I proceed. thanks in advance.
Note:
this is what I tried
<div style="display:table;height:100%;width:100vw">
<div style="display:table-row-group;height:100%;width:100vw">
<div class="hidden-xs col-sm-half" style="background:black;height:100vh;"></div>
<div class="col-sm-10 col-md-10 col-lg-11half">
<div id="prdgrid">
<breadcrumbs path=prd.path ></breadcrumbs>
<div class="row" style="width: 100%;height:100%">
<div class="leftcol">
<div class="infotile" style="height: 25%;">
<infotile></infotile>
</div>
<div class="detail" style="height:31%">
<details></details>
</div>
<div>
<match></match>
</div>
</div>
<div class="rightcol" style="height:100%">
<div class="pricetile hidden-xs">
<pricechart></pricechart>
</div>
<div class="rightbottomcol" style="height:51%">
<div class="rev">
<div class="title">
<tile></tile>
</div>
</div>
<div class="rev" style="height: 100%;">
<pd></pd>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have to use Bootstrap Grid and Panel for Same Layout instead of Creating own CSS layout. Refer Link : https://getbootstrap.com/examples/grid/ and http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
This is what your code should look like:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-12"></div>
<div class="col-md-12"></div>
</div>
<div class="col-md-8"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-2"></div>
<div class="col-md-6"></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 cant seem to see why the content below is not going into the box which it's inside as defined within the HTML
This is the image because I do not have enough rep yet to add it to the formatting http://i.stack.imgur.com/A3nWx.png
This is the HTML which I am using
<div class="row">
<div class="col-md-4">
<div class="block">
<div class="block-title">
<h2>Title</h2>
</div>
<div class="box-body">
<div class="col-md-1">
<h4>Server 1</h4>
<span class="label label-success">Online <i class="fa fa-check"></i></span>
</div>
</div>
</div>
</div>
</div>
Option 1
Looking at your code, I suppose you are using Twitter Bootstrap.
From you code you have the column <div class="col-md-1"> class inside the outer column <div class="col-md-4">.
For example:
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-1">
</div>
</div>
</div>
</div>
</div>
</div>
Please note that bootstrap requires that you wrap a columns with a <div class="row"> so as to clear the float.
Option 2
You could add clear: both; in the class .box-body in your css code. It will clear the column float.
md_5 Hi there. Looks like you are wanting to have the title have it's own area from the box-body.
How about something like this example.
I use some color to show each block.
Here is the Fiddle.
<div class="container col-xs-6 block1">
<div class="row">
<div class="col-md-4">
<div class="block-title bg-primary">
<h2>Title</h2>
</div>
<div class="box-body col-md-12 bg-info">
<h4>Server 1</h4>
<span class="label label-success">Online <i class="fa fa-check"></i></span>
</div>
</div>
</div>
</div>
To fix this I added the clearfix class. Thanks for reminding me, Math4w.
Here is a link to some documentation regarding the clearfix class: http://getbootstrap.com/css/#grid-responsive-resets
So the final code looked like this,
<div class="row">
<div class="col-md-4">
<div class="block">
<div class="block-title">
<h2>Servers</h2>
</div>
<div class="clearfix">
<div class="col-md-4">
<p class="well text-center">
<strong>Server 1</strong>
</br>
<span class="label label-success"><i class="fa fa-check">Online</i></span>
</p>
</div>
</div>
</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-->