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?
Related
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?
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'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>
I have a div structure as below and i want to only target the last .pcontain on the page so i can remove the border-right - how do i go about it?
<div class="container">
<div class="postcontainer">
<div class="latest-posts">
<div class="thumbnail"></div>
<div class="pcontain"></div>
<div class="more"></div>
</div>
</div>
<div class="postcontainer">
<div class="latest-posts">
<div class="thumbnail"></div>
<div class="pcontain"></div>
<div class="more"></div>
</div>
</div>
<div class="postcontainer">
<div class="latest-posts">
<div class="thumbnail"></div>
<div class="pcontain"></div>
<div class="more"></div>
</div>
</div>
<div class="postcontainer">
<div class="latest-posts">
<div class="thumbnail"></div>
<div class="pcontain"></div>
<div class="more"></div>
</div>
</div>
</div>
Working Fiddle
Use last child
.postcontainer:last-child .pcontain{
background: black;
color: white;
}
Read more about last-child here
You can use the last-child pseudo-class like:
.postcontainer:last-child .pcontain {
color: darkolive;
}
http://jsfiddle.net/ZZMZn/10/