I have the following layout:
<div class="index-card" data-card-index="5">
<div class="row">
<div class="col-md-12 text-center">
5
</div>
</div>
<div class="row">
<div class="col-md-12 text-center card-symbol">
ה
</div>
</div>
<div class="row">
<div class="col-md-12 text-center"><i>He</i></div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<i>H</i>
</div>
</div>
</div>
And this CSS rule:
.index-card :hover {
background-color: lightgoldenrodyellow;
}
Yet when I hover over empty space in the .index-card div, nothing happens. When I hover over individual child divs, such as .card-symbol, then only the background colour of that inner div changes.
How do I make the whole background of the .index-card div change colour on hover? Also, why does the whole div not change colour? The CSS rule is not for the inner divs but for the whole outer div.
The space after the class in the CSS, this causes any child elements to have the property applied instead. Remove the space, remove the issue
.index-card {
background: white;
}
.index-card:hover {
background: red;
}
<div class="index-card" data-card-index="5">
<div class="row">
<div class="col-md-12 text-center">
5
</div>
</div>
<div class="row">
<div class="col-md-12 text-center card-symbol">
ה
</div>
</div>
<div class="row">
<div class="col-md-12 text-center"><i>He</i></div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<i>H</i>
</div>
</div>
</div>
.my-card {
background-color: white;
}
.my-card:hover {
background-color: green;
}
if you want transition so you can use it transition: 0.5s;
.my-card {
background-color: white;
transition: 0.5s;
}
.my-card:hover {
background-color: white;
}
Related
I'm working with bootstrap 4 and following codes,
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.css">
<div class="card-header rounded-0 border border-dark">
<div class="row">
<div class="col-12 col-md-4 ">
<img src="{{asset('images/usa.jpg')}}" alt="..." class="rounded-circle">
</div>
<div class="col-12 col-md-8 ">
<p>This is not a game fgfhg dfghdh dhdhdf dfgdhfhg dfdfhfh dfhdfhdf dfhdfh</p>
</div>
</div>
</div>
I need display above two div elements in the same row on large screen and need separate two rows (image is above and paragraph is under the image) when it is displaying mobile device. I use following col-12 col-sm-8 col-md-6 col-lg-4 col-xl-3 item codes in side to the div but not success.
how could I manage this problem?
View in Full Page , You will get it
body {
padding-top: 40px;
}
.col-sm-6 {
background: #ccc;
}
.other {
background: #a4a4a4;
}
.p {
text-align: center;
padding-top: 120px;
}
.p a {
text-decoration: underline;
color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>Bootstrap Grid Demo</h1>
</div>
<div class="col-sm-6 other">
<h1>2 Columns</h1>
</div>
</div>
</div>
<p class="p">Demo by Jabir Sayed. See article.</p>
My goal is to achieve the following image on my page:
I managed to achieve this with the HTML and CSS you can find below, but it doesn't seem very viable, because the sidebar is losing it's physical height because of the position: absolute.
I'm wondering if it's possible to make one row with two columns on the left and a sidebar on the right, without having to use positioning.
I tried position: relative with a negative top, but since the top col-md-9 has a changing height (depending on what is entered), I can't give it a negative top. It'll simply be too static and impossible to maintain.
Changing the order in the HTML doesn't change anything, since the physical height of the sidebar will move the 2nd content down.
.sidebar {
position: absolute;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-9">
Changing content
</div>
<div class="col-md-3 sidebar">
Sidebar
</div>
<div class="col-md-9">
More content
</div>
</div>
I use xs columns for this example, but you can change to md in your page.
Firstly create a 9-column and a 3-column div. Then put two divs inside the 9-column one.
.content, .sidebar {
margin: 10px;
padding: 20px;
}
.content {
background-color: navy;
color: white;
}
.sidebar {
background-color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row wrapper">
<div class="col-xs-9">
<div class="row">
<div class="col-xs-12">
<div class="content">Content</div>
</div>
<div class="col-xs-12">
<div class="content">Content</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="sidebar">Sidebar</div>
</div>
</div>
You can nest col-x-x inside other col-x-x
You just have to create 2 parents: content and sidebar, then add multiple contents into the content parent :
<div class="row">
<div class="col-md-9">
<div class="col-md-12">
Content
</div>
<div class="col-md-12">
More content
</div>
</div>
<div class="col-md-3 sidebar">
Sidebar
</div>
</div>
You cannot have more that 12 columns in a row unless it is not defined in your custom grid.
What you can try is this:
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-sm-12">
Changing content
</div>
<div class="col-sm-12">
More content
</div>
</div>
</div>
<div class="col-md-3" style="position: relative;">
<div class="row">
<div class="col-sm-12 sidebar">
Sidebar
</div>
</div>
</div>
</div
As a solution, you can make sidebar to stay at the right side of screen if you'll make left section overflow: auto.
.sidebar {
height: 100vh;
background: lightgreen;
}
.left-section {
height: 100vh;
background: lightblue;
overflow: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-9 left-section">
<div class="row">
<div class="col-sm-12">
Changing content
</div>
<div class="col-sm-12">
More content
</div>
</div>
</div>
<div class="col-sm-3 sidebar">
Sidebar
</div>
</div>
</div>
I know this may be easy for most of you but I'm stuck with this issue.
I need to implement this design:
Layout Design
... and for now I've got this Current layout.The general structure is a row with col-3 and col-9, this col-9 has two rows, one for name and job title, and the other one for statistics in the page (col-3 for each of them). I need them to fill the height of his parent, but height property doesn't work. Which could be a clean solution? Thanks a lot.
Here is the structure, it's pretty simple tho.
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img ...>
<span>..</span>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">...</h2>
<h4 class="text-muted">...</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 stat">
<h3>...</h3>
<small>...</small>
</div>
...
</div>
</div>
Use position: relative on the parent and then position:absolute; bottom: 0; on the children.
Nice explanation there.
Flexbox would be my recommendation although CSS tables might be an option too.
Codepen Demo
Snippet Demo (view Fullscreen)
.user-image {
background: pink;
}
.user-image img {
display: block;
margin: auto;
}
.profile-header {
display: flex;
}
.right {
background: #c0ffee;
display: flex;
flex-direction: column;
}
.stats {
margin-top: auto;
}
.stat {
background: lightgrey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img src="http://www.fillmurray.com/300/200" alt="" />
<span>User Ranking</span>
</div>
<div class="col-md-9 right">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">User Name</h2>
<h4 class="text-muted">reference</h4>
</div>
</div>
<div class="row text-center stats">
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
</div>
</div>
So i have a 4 column row in bootstrap and i want to add a divider in between them.
I've added this through the css and made it so .divider-right:last-child has no border. This is fine until you resize the page and it goes from a 4 column grid, to a two column grid.
.divider-right {
border-right:1px solid #dddddd;
}
.divider-right:last-child {
border-right:transparent;
}
<section class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 divider-right">
Content box in here
</div>
<div class="col-xs-12 col-sm-6 col-md-3 divider-right">
Content box in here
</div>
<div class="col-xs-12 col-sm-6 col-md-3 divider-right">
Content box in here
</div>
<div class="col-xs-12 col-sm-6 col-md-3 divider-right">
Content box in here
</div>
</div>
</section>
This should handle removing the border as the viewport is reduced.
Add the appropriate Pseudo Class to the relevant media query.
.row div.divider-right {
border-right: 1px solid #f00;
}
.row div.divider-right:last-child {
border-right: none;
}
#media(max-width:991px) {
.row div.divider-right:nth-child(2n) {
border-right: none;
}
}
#media(max-width:767px) {
.row div.divider-right {
border-right: none;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
<div class="row">
<div class="col-sm-6 col-md-3 divider-right">
<div class="alert alert-info">Content box in here1</div>
</div>
<div class="col-sm-6 col-md-3 divider-right">
<div class="alert alert-info">Content box in here2</div>
</div>
<div class="col-sm-6 col-md-3 divider-right">
<div class="alert alert-info">Content box in here3</div>
</div>
<div class="col-sm-6 col-md-3 divider-right">
<div class="alert alert-info">Content box in here4</div>
</div>
</div>
</section>
i think you want to remove border of second element when it jumps to next div
try this code
#media (max-width:991px) {
.divider-right:nth-child(2n) {
border-right: medium one;
}
}
Actuly i want to make a grid tiles like below image
My all columns comes in a parent div thats why i am unbale to change the bg color on hover for entire row.
If i use multiple rows as a parnet for cloumns than these columns wont comes correctly to each other.
HTML:
<div class="container grid-layout">
<div class="row">
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="name">Supercity</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="name">Supercity</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="name">Supercity</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="name">Supercity</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="name">Supercity</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="name">Supercity</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="name">Supercity</div>
</div>
</div>
</div>
CSS:
.grid-layout .row .col-md-3{
text-align: center;
border-bottom:#eee solid 1px;
}
.grid-layout .row .col-md-3 > a{
padding:10px 0;
display: inline-block;
width:100%;
color:#999999;
outline: none;
}
.grid-layout .row .col-md-3 > a:hover{
color:#5fa9e3;
text-decoration: none;
}
.grid-layout .row .col-md-3:hover{
background: #f7f7f7;
cursor: pointer;
}
.name{
padding:15px 0;
}
Please let me know what would be the correct approach.
You can try this using CSS like this:
.row:hover div[class^="col-"]{
background-color: #dcdcdc;
}
Hope this is what you are looking for.
If you just want to change the .row background-color this will work.
$('body > div > div').on( "mouseover", function() {
$( this ).css( "background-color", "red" );
});