In my new project I'm using bootstrap and css both and I'm making responsive table using div base structure. I am trying this example for making table but my page is like below image:
I am trying to put below image structure:
Problem is in only 1x3 tuple.
`
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="table" style="border:1px solid black;">
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-6">2</div>
</div>
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
`
Using your code I'm correct your code. Change first col-md-6 to col-md-4 and then change second col-md-6 to col-md-8. If after this you do not understand then go with my code.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
div{
border: 1px solid black;
}
</style>
<div class=" table table-bordered" >
<div class="row " >
<div class="col-md-4">
1
</div>
<div class="col-md-8">
2
</div>
</div>
<div class="row ">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
</div>
<div class="row ">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
</div>
</div>
see my code snippet in full screen of your device.
If I'm understanding your question, the top values should col-md-4 and col-md-8, not 6 and 6:
<div class=" table " style="border:1px solid black;">
<div class="row ">
<div class="col-md-4">
1
</div>
<div class="col-md-8">
2
</div>
</div>
<div class="row ">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
</div>
<div class="row ">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
</div>
</div>
Try the following
<div class=" table " style="border:1px solid black;">
<div class="row ">
<div style="width:35%;float:left;border:1px solid black;">
1
</div>
<div style="width:65%;float:left;border:1px solid black;">
2
</div>
</div>
<div class="row ">
<div style="width:35%;float:left;border:1px solid black;">
1
</div>
<div style="width:30%;float:left;border:1px solid black;">
2
</div>
<div style="width:35%;float:left;border:1px solid black;">
3
</div>
</div>
<div class="row ">
<div style="width:35%;float:left;border:1px solid black;">
1
</div>
<div style="width:30%;float:left;border:1px solid black;">
2
</div>
<div style="width:35%;float:left;border:1px solid black;">
3
</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 want to create this grid with twitter bootstrap 3.
<div class="container-fluid border">
<div class="row-fluid debug2">
<div class="span2 debug">aa</div>
<div class="span3 debug">bb</div>
<div class="span3 debug" style="float:left; height:300px;"></div>
</div>
<div class="row-fluid">
<div class="span3">xxx</div>
</div>
</div>
Grid Picture
You can find guidance on how to upgrade from Bootstrap v2.x to v3.x here.
row-fluid is now row
.span* is now .col-xs-*, .col-sm-*, .col-md-* or .col-lg-*. Configure depending on the screen size.
Basically it translates to this:
<div class="container border">
<div class="row debug2">
<div class="col-md-2 debug">aa</div>
<div class="col-md-3 debug">bb</div>
<div class="col-md-3 debug" style="float:left; height:300px;"></div>
</div>
<div class="row">
<div class="col-md-3">xxx</div>
</div>
</div>
Try this
.border {
border: 1px solid grey;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="row ">
<div class="col-xs-4 border" style="height:150px;"></div>
<div class="col-xs-2" ></div>
<div class="col-xs-3 border" style="height:50px;"></div>
<div class="col-xs-3 border" style="height:50px;"></div>
<div class="col-xs-4"></div>
<div class="col-xs-8 border" style="height:250px;"></div>
</div>
</div>
</div>
</div>
</div>
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>
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>