I want to select the second div in my markup with css using :nth-child but I cannot make it work.
I have this markup generated by a plugin:
<div class="single-container">
<div class="toggle-default">
<div class="toggle">
<div class="toggle_title toggle_active">FIRST</div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>
</div>
<div class="toggle-default">
<div class="toggle">
<div class="toggle_title toggle_active">SECOND </div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>
</div>
<div class="toggle-default">
<div class="toggle">
<div class="toggle_title toggle_active">THIRD </div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>
</div>
</div>
I've tried this : .toggle-deafult .toggle:nth-child(2) { background:red; } and this .toggle div:nth-child(2) but it's not working.
Can someone help me with this ?
Thank you !
LATER EDIT: I've modified the markup, this is what I need to modify : <div class="toggle_title toggle_active">SECOND </div>
.toggle-default:nth-child(2) .toggle_title{ background:#f00;}
It is the second one which you want to modify.
You need .toggle-default:nth-of-type(2n) { color: red; } (note the 2n).
.toggle-default:nth-child(2) {
background-color: red;
}
Related
I am using latest version of bootstrap and have a design with 2 columns where the first column should contain some text and the second column should contained a background image which fills the whole column up to the users right screen. I want the background image to go outside the column to the right, until it reaches the edge of the browser.
like this:
how can i make second column to go outside the container? That's what i am currently using which is not working (image gets cut off by container)
<div class="container">
<div class="row">
<div style="" class="col-sm-12 col-lg-6">
<p>Example text</p>
</div>
<div class="col-sm-12 col-lg-6 bg-image" style="background-image:url('http://placehold.it/1800x1045');">
</div>
</div>
</div>
Try adding a contain value to the background image.
style="background-image: url('http://placehold.it/1800x1045'); background-size: contain;"
You can create the main container as "container-fluid" to fill the entire page content and then create the columns, one other container with your text and the other with the image, check the code below, ignore the height and the borders because I was trying to create your scenario:
<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid" style="height: 500px;">
<div class="row h-100">
<div class="col-sm-6" style="border: 1px solid pink;">
<div class="row">
<div class="container">
<div style="border: 1px solid blue;" class="col-sm-6 col-lg-6">
<p>Example text</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-6 no-gutters bg-image" style="background-image:url('https://dummyimage.com/600x400/666/fff'); border: 1px solid red;">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
What you are trying to do is not contemplated by Bootstrap, but you can use a workaround. Why it is not contemplated? Because for a 2 column layout, it uses up 50% of the div, and you are not asking for a 50/50 layout.
First of all, the container, fluid or not, doesn't entirely touch the side of the page. Also, in both cases it is symetrical, and your design is not.
So... what you want to do is a greater div that occupies 100% of the page, with a container (fluid or not) in it. With absolute positioning, you create another div that occupies 50% of the greater div, and has the image as background.
.greater-container {
position: relative; //needed so that the .image-container can be properly positioned
}
.image-container {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
right: 0;
background-color: green;
background-image: url('http://placekitten.com/g/1800/1045');
background-size: cover;
z-index: 0;
}
.content-column {
border: 1px solid red; //so that we can see it
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="greater-container">
<div class="image-container"></div>
<div class="container">
<div class="col-sm-6 content-column">
Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet.
</div>
</div>
</div>
As a sidenote, this is not an easy layout for a responsive website. That background-image will get resized a lot and will probably not always work well.
So I'm having a hard time aligning a button at the bottom of my Bulma's column.
I want the button "Buy" to be at the bottom of the right column (side by side with the button "Hello"). I'm in this situation because my other column content is longer.
So far I tried thoses CSS styles on my button (and none of them helped me):
vertical-align: bottom;
margin-bottom: auto;
position: absolute;
bottom: 0;
Here is my HTML:
<section class="section">
<div class="columns is-centered">
<div class="column is-one-fifth">
<h4 class="title is-4">I'm a big column</h4>
I'm taller than the column next to me so my column will be bigger, lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">Hello</button>
</div>
<div class="column is-one-fifth">
<h4 class="title is-4">I'm a small column</h4>
I'm a small column, and my button missplaced
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
</div>
</section>
Could you guys help me?
Thanks.
Alright, foud the answer : The Bulma column needs to have a few properties (suggested by #ahsan-ullah). Then the button needs to have an auto margin to top.
<section class="section">
<div class="columns is-centered">
<div class="column is-one-fifth item">
<h4 class="title is-4">I'm a big column</h4>
I'm taller than the column next to me so my button will be higher,lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">Hello</button>
</div>
<div class="column is-one-fifth item">
<h4 class="title is-4" style="align-self: flex-start;">I'm a small column</h4>
I'm a small column, and my button is well placed
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
</div>
</section>
.item{
display:flex;
flex-direction:column;
justify-content:space-between
}
.columns button{
margin-top: auto;
}
Result :
hope it is the answer for you work.
.maindiv{
width:200px;
height:180px;
border:1px solid red;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between
}
.innerdiv{
display:flex;
flex-direction:column;
}
button{
width:150px;
height:30px;
color:white;
background-color:blue;
border-radius:4px
}
<div class='maindiv'>
<h3>Mana Foutan</h3>
<span>lorem ipsum lorem ispum</span>
<div class='innerdiv'>
<i>Make it rain!</i>
<button>Buy</button>
</div>
</div>
You can use inline style margin-top:auto on the column div like this:
<div class="column is-one-fifth" style="margin-top: auto;">
<h4 class="title is-4">I'm a small column</h4>
I'm a small column, and my button missplaced
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
Alternately, probably preferably, add it as a custom style to your .css and use it as a class inline.
.css:
.valignbottom{
margin-top: auto;
}
html:
<div class="column is-one-fifth valignbottom">
<h4 class="title is-4">I'm a small column</h4>
I'm a small column, and my button missplaced
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
Im using bootstrap 4.0.0-beta.2 and I have a css problem.
I want following layout
This is the html:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div id="task" class="container">
<div class="row">
<div class="col-12">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12">
<div class="card card-shadow" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint></app-paint>
</div>
</div>
</div>
</div>
</div>
And what im trying to create is a layout of cards.
I want the first card to stay within the col-12 width and adapt the hight after content. And then I want the second div to always end at bottom of page. No margin between. So I tried to add position:fixed, bottom:0 and height:100% but then the width get wierd and it cant handle resize of the page. So How can I force the second div to end at page bottom?
You may use height and margins.
Boostrap class: .h-100 sets height:100% , but parent need an height where % can be calculated from (css added for html & body)
margin-top:auto and bottom 0 will send the second element at the bottom. boostrp classes used : mt-auto mb-0
html,
body {
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container h-100"><!-- class added -->
<div class="row h-100"><!-- class added -->
<div class="col-12">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 mb-0 mt-auto"><!-- class added -->
<div class="card card-shadow" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint>app-paint</app-paint>
</div>
</div>
</div>
</div>
</div>
or do you need the second div to expand ?
html,
body {
height: 100%;
}
.custom-flex {
flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container flex-column h-100">
<!-- class added -->
<div class="d-flex flex-column h-100">
<div class="">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="d-flex flex-column custom-flex">
<div class="card card-shadow custom-flex" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint>app-paint</app-paint>
</div>
</div>
</div>
</div>
</div>
I think the answer of this question would be to change the css of the card. If you are looking for to increase or decrease the space between the cards from top or from bottom you should change the css like so:
In your case for card shadow it would be
.d-flex [class*='card-shadow'] {
margin-top: 2.5em;
margin-bottm: 2.5em;
}
Use your own unit for css calculation em, px or whatever suit you.
I am trying to create a layout using Flexbox where I have elements which consist of 3 other internal elements. The parent item element contains 3 divs: image, button, text. The issue is that my items will not always contain images or text that is the same height as the others. The button is the one thing that will have a consistent height. I am trying to figure out if it's possible to have each of my image divs be the same height as the tallest one and same for the text divs. I would also like the images to be vertically aligned to the bottom, so if one element has a shorter image, the white space to make the element the same height will go above the image like this:
And here is what I have so far:
.container {
display:flex;
flex-wrap:wrap;
flex-flow:row wrap;
justify-content:center;
}
.item {
max-width:200px;
margin:0 20px;
}
<div class="container">
<div class="item">
<div class="image">
<img src="http://placehold.it/150x300" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x200" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x250" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x270" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
I know that I could do this using Javascript to loop through each item to get the tallest and change the CSS of all others, but I'd like to use only CSS if possible. I also know that I could just set the height of the image container to the height of the tallest image, but these images are going to be dynamic and there are going to be a lot of them, so I'd rather have a solution that doesn't require hardcoding values.
Flexing the .item class and adding justify-content: flex-end; would provide the majority of the affect, but as far as I know you'd have to set a specific height on at least one of the items if you want two elements to be aligned the same across flexbox. Happy to be proven wrong though.
You could alternatively use margin-top: auto on the first child to push any unused space to the top and everything else down.
.container {
display:flex;
flex-wrap:wrap;
flex-flow:row wrap;
justify-content:center;
}
.item {
max-width:200px;
margin:0 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.text {
height: 36px; /* magic number */
}
<div class="container">
<div class="item">
<div class="image">
<img src="http://placehold.it/150x300" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x200" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x250" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x270" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
I'm using Bootstrap 3.
On large screens I want to have a sidebar on the left and the maincontent on the right. On small screens I want to have important blocks of the sidebar on top, then the maincontent, then the less important blocks of the sidebar. Is there a way to achieve that?
Here's a JS Bin showing the problem: http://jsbin.com/wibucopi/1/ and below is the current code (which, however, displays all sidebar content on top on small screens).
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="upper" style="background:red">
<h3>I want to be <b>above</b> the main content on small screens!</h3>
</div>
<div class="lower" style="background:green">
<h3>I want to be <b>below</b> the main content on small screens!</h3>
</div>
</div>
<div class="col-sm-9">
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
I've already played around with col-sm-pull/push-x, but I could only achieve that the whole sidebar is displayed below the maincontent on small screens.
I don't want to duplicate content and show / hide it with visible-XY, hidden-XY, as the page would get bigger and it feels just wrong.
It would be great to have a pure Bootstrap css solution, or at least a css only one (I wouldn't like to use js).
You could do something like this:
Bootply Demo
HTML:
<div class="container-fluid">
<div class="row">
<div class="upper col-sm-3" style="background:red">
<h3>I want to be <b>above</b> the main content on small screens!</h3>
</div>
<div class="col-sm-9 col-sm-pull-right">
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="lower col-sm-3" style="background:green">
<h3>I want to be <b>below</b> the main content on small screens!</h3>
</div>
</div>
</div>
CSS:
#media (min-width: 768px) {
.col-sm-pull-right {
float: right;
}
}
.lower {
clear: left;
}