How to achieve this following design using twitter bootstrap 3 - html

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>

Related

Extreme tall elements glitch

I try to make infinity scroll table with only currently visible items rendered in HTML. But with some millions of entries I encountered glich in rendering extreme tall placeholders for unloaded data.
I tried this with div elements and HTML tables too but with similiar glitch.
Please use Chrome to reproduce the problem. With Firefox is problem too but it behaves differently.
Here is minimal example code:
https://jsfiddle.net/bj0tmh2r/
<style>
.row {
border-bottom: 1px solid #f00 !important;
}
</style>
<div class="table-responsive" style="max-height: 600px;">
<div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row" style="background: #f00;height: 33100000px;">
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row" style="background: #0f0;height: 299px;">
</div>
</div>
</div>
If you scroll to last .row elements, you can see missing bottom red borders between rows.
Why this happens. How to avoid it?

Making table with div base structure for my responsive project

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>

How can achieve in bootstrap 3 a layout with a row spanning tow rows and a column spanning two columns

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>

Replace the border with the image

The border shows even for the picture since it's done for the entire block. However, I want to hide the border from appearing around the image. What should I do?
<div style="border: 1px solid #000">
<div class="row">
<div class="col-xs-24">
<div style="background-image: url('young.png'); min-height:200px;"></div>
</div>
</div>
<div class="row">
<div class="col-xs-24">
<div class="">
The entire paragraph text is here.
</div>
</div>
</div>
</div>
Example: https://jsfiddle.net/f28zraee/

You have the border around the wrong element, see fiddle. https://jsfiddle.net/f28zraee/1/
<div>
<div class="row">
<div class="col-xs-24">
<div style="background-image: url('http://placehold.it/238x159.jpg'); min-height:200px;"></div>
</div>
</div>
<div class="row">
<div class="col-xs-24">
<div style="border: 1px solid #000; border-top: none;">
The entire paragraph text is here.
</div>
</div>
</div>
</div>

Move the style attribute from your first line into the <div> tag of the second row:
<div>
<div class="row">
<div class="col-xs-24">
<div style="background-image: url('young.png'); min-height:200px;"></div>
</div>
</div>
<div class="row" style="border: 1px solid #000">
<div class="col-xs-24">
<div class="">
The entire paragraph text is here.
</div>
</div>
</div>
</div>
EDIT:
Here's the fiddle: https://jsfiddle.net/ye4pn0oz/
What's the downvote for?

css inline-blocks and bootstrap grid system output

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>