I'm trying to have a specific HTML markup of my divs using css and bootstrap 3.2. The image below demonstrates the result I want to get.
I've used the bootstrap grid system so that my page would be responsive and properly displayed in small screen devices. This is the code I've tried. And I used http://www.bootply.com to test it.
Any ideas how to get the markup ?
<div>
<div style="display:inline-block; border:1px solid gray; width:150px; height:150px;">
<img src='' alt="image go here !"/>
</div>
<div class="container-fluid" style="display:inline-block;">
<div class="row" style="border:1px solid gray;">
<div class="col-md-9">This is the product name</div>
<div class="col-md-3 text-right">1 230.99</div>
</div>
<div class="row" style="display:inline-block; border:1px solid gray;">
<div class="col-md-6">Property 1</div>
<div class="col-md-6">Property 2</div>
</div>
</div>
</div>
The desired result :
EDIT : The result I get :
I've created a Bootply for you.
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="img">
<img src="">
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-8">
This is the product name
</div>
<div class="col-md-4">
1 230.99
</div>
</div>
<div class="row">
<div class="col-md-6">
Property 1
</div>
<div class="col-md-6">
Property 2
</div>
</div>
</div>
</div>
</div>
Related
I feel like this should be easy, but I'm trying to get my .temp and .city divs to be side-by-side, but they're stacking vertically instead.
I've tried changing the size of the columns, but they always stack on top of each other. Any ideas?
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
</div>
You can wrap temp div and city div into 2 different columns. Check this Bootstrap4 Example.
.wind,
.temp,
.city {
height: 50px;
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
</div>
<div class="col-lg" id="col3">
<div class="city"></div>
</div>
</div>
You can rearrange your html code to this format.
<div class="row">
<div class="col-lg" id="col2">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
You should edit your code to this, making the second row have two columns.
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col temp"></div>
<div class="col city"></div>
</div>
</div>
I want to achieve something like this
So, in the image , A is occupying two rows and B is occupying two columns
I tried, something like this, but as you can see, the logo is never
two column wide, because it is inside a nested row, so it never looks aligned , it always looks shorter or larger
.row{
border:1px solid red;
}
.row div{
min-height: 100px;
border:1px solid black;
}
<div class="container-fluid">
<div class="row upper-row">
<div class="col-md-7" id="">
<div class="row">
<div class="col-md-12">
x
</div>
</div>
<div class="row">
<div class="col-md-8">
s
</div>
<div class="col-md-4">
LOGO
</div>
</div>
</div>
<div class="col-md-5" id="">
A
</div>
</div>
<div class="row bottom-row">
<div class="col-md-5" id="">
</div>
<div class="col-md-7" id="">
B
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-4">
A
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
B
</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>
I need to design grid using bootstrap, like in the picture that I have uploaded.Please help me.
I think something along the lines of
<div class="col-sm-4">
<div class="content-here">
<img src="img1.jpg" />
</div>
</div>
<div class="col-sm-8">
<div class="boxes">
Box 1
</div>
<div class="boxes">
Box 2
</div>
<div class="boxes">
Box 3
</div>
<div class="boxes">
Box 4
</div>
</div>
CSS
.content-here { height: 400px; }
.boxes { float:left; width:50%; height:200px; }
The grid system code might look like this :
<div class="row">
<div class="col-sm-4">
<img src="example.jpg">
</div>
<div class="col-sm-4">
<div class="col-sm-12">
<img src="example.jpg">
</div>
<div class="col-sm-12">
<img src="example.jpg">
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-12">
<img src="example.jpg">
</div>
<div class="col-sm-12">
<img src="example.jpg">
</div>
</div>
</div>
After that, you can specify the width and height of each image. If you want your image to take a full width (means taking all space of the column), you can set width:100%.
I am trying to design a responsive page like this
using margin and padding i tried to somehow match the design but failed...
here is the basic sample code i tried...
<div class="container" style="border:1px solid red;">
<div class="container col-lg-6" >
<div class="row col-lg-12" style="border:1px solid brown;">
section1
</div>
<br/>
<div class="row col-lg-12" style="border:1px solid brown;">
section2
</div>
</div>
<div class="container col-lg-6" >
<div class="row col-lg-12" style="border:1px solid blue;">
section3
</div>
</div>
</div>
I need some help.. Thank you..
You can try this.
<div class="row">
<div class="col-xs-8">
<div class="col-xs-12">
<div class="well" style="height: 100px">
</div>
</div>
<div class="col-xs-12">
<div class="well" style="height: 40px">
</div>
</div>
</div>
<div class="col-xs-4">
<div class="well" style="height: 140px">
</div>
</div>
It is just a demo. You can add border, height on your own.
You need to add some negative margins to the left and right of your inner divs. Also, containers within containers is not good practice, and it gets messy on various browser sizes.
http://www.bootply.com/6FWRFHv62f
CSS
.n-margin{margin-left:-30px; margin-right:-30px;}
HTML
<div class="container" style="border:1px solid red;">
<div class="row">
<div class="col-xs-6 n-margin">
<div class="col-xs-12" style="border:1px solid brown;height:200px;">
section1
</div>
<div class="col-xs-12" style="border:1px solid brown;height:60px">
section2
</div>
</div>
<div class="col-xs-6 n-margin pull-right">
<div class="col-xs-12" style="border:1px solid blue;height:260px">
section3
</div>
</div>
</div>