So i have this demo https://fiddle.jshell.net/nx4s6jsd/ where i have that html structure. I want to remove broder-bottom from last child but i dont know how. I tried with
.product:last-child{
border-bottom:none:
}
but its not working .Any suggestion?
<div class="checkout">
<div class="checkout_title"><span>Vasa narudzba</span></div>
<div class="product custom_form_title order_product_list">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 no-padding-right">
<div class="product_image">
<img src="assets/img/product1_small.png" class="img-responsive" />
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="product_box">
<div class="product_title">
<span>Product title</span>
</div>
<div class="product_description">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. IntegeLorem ipsum dolor sit amet</span>
</div>
</div>
</div>
</div>
</div>
<div class="product custom_form_title order_product_list">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 no-padding-right">
<div class="product_image">
<img src="assets/img/product1_small.png" class="img-responsive" />
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="product_box">
<div class="product_title">
<span>Product title</span>
</div>
<div class="product_description">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. IntegeLorem ipsum dolor sit amet</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="total custom_form_title order_list">
<span class="left-title">Cijena bez PDV-a</span><span class="right-title">0,000.00 KM</span>
<span class="left-title">PDV(17%)</span><span class="right-title right">0,000.00 KM</span>
<span class="left-title">Postarina</span><span class="right-title right">0,000.00 KM</span>
<span class="left-title">Total cijena</span><span class="right-title right">0,000.00 KM</span>
</div>
</div>
</div>
</div>
you need to wrap .product with in div, the problem is right now in you code .product is not last-child of parent div so check my code snippet
.black_line{
margin-top: 30px;
border-bottom: 1px solid #24282f;
margin-bottom: 20px;
}
.finish_button{
float: left;
margin-bottom: 60px;
}
.finish_button a{
padding: 12px 45px;
}
.right{
float: right;
}
.order_list{
float: left;
margin-top: 20px;
border-top:1px solid black;
border-bottom: 1px solid black;
padding-top: 10px;
padding-bottom: 10px;
}
.order_product_list{
float: left;
margin-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #cccccc;
}
.order_product_list:last-child{border: 0;}
<div class="checkout">
<div class="checkout_title"><span>Vasa narudzba</span></div>
<div class="product-holder">
<div class="product custom_form_title order_product_list">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 no-padding-right">
<div class="product_image">
<img src="assets/img/product1_small.png" class="img-responsive" />
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="product_box">
<div class="product_title">
<span>Product title</span>
</div>
<div class="product_description">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. IntegeLorem ipsum dolor sit amet</span>
</div>
</div>
</div>
</div>
</div>
<div class="product custom_form_title order_product_list">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 no-padding-right">
<div class="product_image">
<img src="assets/img/product1_small.png" class="img-responsive" />
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="product_box">
<div class="product_title">
<span>Product title</span>
</div>
<div class="product_description">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. IntegeLorem ipsum dolor sit amet</span>
</div>
</div>
</div>
</div>
</div></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="total custom_form_title order_list">
<span class="left-title">Cijena bez PDV-a</span><span class="right-title">0,000.00 KM</span>
<span class="left-title">PDV(17%)</span><span class="right-title right">0,000.00 KM</span>
<span class="left-title">Postarina</span><span class="right-title right">0,000.00 KM</span>
<span class="left-title">Total cijena</span><span class="right-title right">0,000.00 KM</span>
</div>
</div>
</div>
</div>
Don't worry. Just remove style "border-top: 1px solid #cccccc;" from selector ".order_product_list".
Here is the universal solution for this type of situation. Adjacent sibling selector (+).
CSS
Add this
.order_product_list + .order_product_list{
border-top: 1px solid #cccccc;
}
Try with nth-child(3) and it will remove the border, like this:
.product:nth-child(3){
border-bottom: none;
}
If you inspect your code you will see that after last .product div there is another div, so the :last pseudo selector won't select anything
The last-child selector is used to select the last child element of a
parent. It cannot be used to select the last child element with a
specific class under a given parent element.
Better approach would be to wrap all the .product items in another container and then apply .product:last-child selector
Related
I want to create flex style UI that looks like this
what I can do so far is split the UI using col-5 col-2 col-5 from bootstrap, and use flex to create the col-5 UI section (left and right), here's my code
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-5">
<div class="d-flex align-items-start">
<div class="avatar me-75">
<i data-feather="upload" class=avatar-icon></i>
</div>
<div>
<p class="mb-0">Lorem ipsum</p>
<p>lorem ipsum dolor sit amet lorem ipsum</p>
</div>
</div>
</div>
<div class="col-2">
<div class="d-flex" style="height: 50px;">
<div class="vr"></div>
</div>
</div>
<div class="col-5">
<div class="d-flex align-items-start">
<div class="avatar me-75">
<i data-feather="user-plus" class=avatar-icon></i>
</div>
<div>
<p class="mb-0">Lorem ipsum</p>
<p>lorem ipsum dolor sit amet lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's the result
the results don't match my expectations, is there a class from bootstrap that I haven't added? or is there another way I can get the result like the mockup I want?
I recommend to remove the col-width given to the vertical border and instead add it separately from the css. Also, use the justify-content-center class of Bootstrap in the div with the d-flex class. I hope this is what you are trying to achieve.
.col-6::after {
content: "";
position: absolute;
border-right: 2px dotted #000;
height: 75px;
top: 10px;
left: 50%;
display: block;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="d-flex justify-content-center">
<div class="avatar me-75">
<i data-feather="upload" class=avatar-icon></i>
</div>
<div>
<p class="mb-0">Lorem ipsum</p>
<p>lorem ipsum dolor sit amet lorem ipsum</p>
</div>
</div>
</div>
<div class="col-6">
<div class="d-flex justify-content-center">
<div class="avatar me-75">
<i data-feather="user-plus" class=avatar-icon></i>
</div>
<div>
<p class="mb-0">Lorem ipsum</p>
<p>lorem ipsum dolor sit amet lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I also created a separate code if you choose to achieve this without using Bootsrap or Flex and instead use the CSS Grid Layout. :)
.card-section {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.card-section .card {
display: grid;
grid-template-columns: 100px 1fr;
justify-self: center;
align-items: center;
}
.card-section .card:first-child::after {
content: "";
position: absolute;
border-right: 2px dotted #000;
height: 100px;
top: 10px;
left: 50%;
display: block;
}
.card-section .card .icon-holder {
background: #000;
width: 75px;
height: 75px;
border-radius: 15px;
}
<div class="card-section">
<div class="card">
<div class="icon-holder">
<i class="icon"></i>
</div>
<div class="info">
<h2>
Title
</h2>
<p>
Description
</p>
</div>
</div>
<div class="card">
<div class="icon-holder">
<i class="icon"></i>
</div>
<div class="info">
<h2>
Title
</h2>
<p>
Description
</p>
</div>
</div>
</div>
I've creating a block called textCard in WPBakery. The markup for this block is wrapped around default Bakery classes which is rending the markup like this:
.textCard {
border: 1px solid red;
display: flex;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="container test d-flex">
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>This is heading</h3>
<p>This is content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>This is header</h3>
<p>This is content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Unsure why the above CSS works when the wrappers are removed:
.textCard {
border: 1px solid red;
display: flex;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="container test d-flex">
<div class="col-sm-4">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing </p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<p>Lorem ipsum dolor </p>
</div>
</div>
</div>
</div>
</div>
</div>
.vc_column-inner and .wpb_wrapper have no styles assigned to them so unsure what may be causing this result?
When you put your textCard in to a wrapper then force it to be 100% height, it will take 100% height of the parent wrapper, which in this case had the default property of height: auto; so it was collapsed.
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. - W3Schools
The reason it worked when you took out the 2 wrappers is because the col-sm-4 was full height as it got the property align-items: stretch; by default as its parent is display: flex;.
Simply adding a rule to make the wrappers 100% height of their parents as well as textCard fixes this issue.
View CodePen
.textCard {
border: 1px solid red;
display: flex;
}
.vc_column-inner,
.wpb_wrapper,
.textCard {
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="container test d-flex">
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>This is heading</h3>
<p>This is content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>This is header</h3>
<p>This is content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is because your styling is no longer affected by actual height, since it's nested with two <div>elements. Following style should be child of class="col-sm-4"
Change style to
.vc_column-inner {
border: 1px solid red;
display: flex;
height: 100%;
}
or move <div class="textCard"> under <div class="col-sm-4">
If i've understood correctly, you don't need to use the bootstrap .col-4 class if you're using display:flex.
You've set the height of the items to be 100% and as display:flex so that means they'll fit the 100% height.
However this happens by default if you set the .container to display:flex and the children .textCard to flex:1 they'll all display equal. The children are set as align-items: stretch by default due to their flex container.
See codepen here, hope that's what you meant!
https://codepen.io/Robhern135/pen/LKaGVL
I can't figure out why the dotted line border for the "employmentFrame" div is not enveloping the inner contents like is the case with "frame" div higher up in the code. As far as I can see I have coded it the same way, with the difference that there is an extra nesting in the one which is working. Or maybe I'm wrong. In any case, I'm just not seeing it. Can anyone tell me what is wrong with this code?
EDIT:
So the dotted line underneath "Personal details" is exactly as I want it to be. The problem is with the dotted line underneath "Recent employment history". Currently that shows as a horizontal line, but it is supposed to go around the information underneath it.
body {
font-family: Cambria, Georgia, serif;
background-color: black;
}
h1 {
font-size: 2.5vw;
color: rgb(54, 95, 145);
}
h2 {
font-size: 1.5vw;
margin: 0;
}
.mainBox {
width: 90vw;
margin: auto;
background-color: white;
}
.margin {
height: 5vw;
}
.contentBox {
width: 80vw;
margin: auto;
overflow: auto;
}
.horizontalLine {
width: 100%;
height: 0.5vw;
background-color: rgb(184, 204, 228);
clear: both;
}
.horizontalEmpty {
width: 100%;
height: 1.5vw;
clear: both;
}
.column {
width: 49%;
}
.sectionTitle {
height: 1.9vw;
background-color: rgb(184, 204, 228);
padding-left: 1vw;
}
.sectionEmpty {
width: 100%;
height: 0.75vw;
clear: both;
}
.frame {
border-style: dotted;
border-color: rgb(184, 204, 228);
border-width: 1px;
width: 99.7%;
clear: both;
}
.frameContent {
width: 95%;
margin: auto;
}
.employmentFrame {
border-style: dotted;
border-color: rgb(184, 204, 228);
border-width: 1px;
padding-left: 1vw;
clear: both;
}
.employmentFrameContent {
width: 100%;
margin: auto;
}
.row {
height: 2vw;
}
.property {
width: 30%;
font-size: 1.3vw;
font-weight: bold;
color: rgb(54, 95, 145);
float: left;
}
.value {
width: 70%;
font-size: 1.3vw;
font-weight: bold;
float: left;
}
<div class="mainBox">
<div class="margin"></div>
<div class="contentBox">
<div id="title" style="text-align: center; height: 3.5vw">
<h1>Curriculum Vitae</h1>
</div>
<div class="horizontalLine"></div>
<div class="horizontalEmpty"></div>
<div class="column" style="float: left">
<div class="sectionTitle">
<h2>Personal details</h2>
</div>
<div class="sectionEmpty"></div>
<div class="frame">
<div class="frameContent">
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Full name</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="row">
<div class="property">Nationality</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="row">
<div class="property">Date of birth</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Street name</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="row">
<div class="property">City</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="row">
<div class="property">Post code</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Email</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="row">
<div class="property">Mobile</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="sectionEmpty"></div>
</div>
</div>
</div>
<div class="column" style="float: right">
<div class="sectionTitle">
<h2>Lorem ipsum</h2>
</div>
<div class="sectionEmpty"></div>
<div class="frame">
<div class="frameContent">
<div class="sectionEmpty"></div>
<div class="row">
</div>
</div>
</div>
</div>
<div class="horizontalEmpty"></div>
<div class="sectionTitle">
<h2>Recent employment history</h2>
</div>
<div class="sectionEmpty"></div>
<div class="employmentFrame">
<div class="employmentFrameContent">
<div class="column" style="float:left">
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Period</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Title</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Company</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Address</div>
<div class="value">Dolor sit amet<br />Dolor sit amet<br />Dolor sit amet<br />Dolor sit amet</div>
</div>
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Telephone</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Manager</div>
<div class="value">Dolor sit amet</div>
</div>
</div>
<div class="column" style="float:right">
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Details</div>
</div>
<div class="sectionEmpty"></div>
</div>
</div>
</div>
</div>
<div class="margin"></div>
</div>
It is due to your inline float: left on the column, the outer box needs to be cleared of the floats inside in order to have layout. Read about the clearfix hack https://www.w3schools.com/css/css_float.asp
There are other solutions to this problem too, use flexbox instead of floats or add a DOM element after the floats with a clear: both on it.
UPDATE
The simplest solution is below:
<div class="employmentFrameContent">
<div class="column" style="float:left">
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Period</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Title</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Company</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Address</div>
<div class="value">Dolor sit amet<br />Dolor sit amet<br />Dolor sit amet<br />Dolor sit amet</div>
</div>
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Telephone</div>
<div class="value">Dolor sit amet</div>
</div>
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Manager</div>
<div class="value">Dolor sit amet</div>
</div>
</div>
<div class="column" style="float:right">
<div class="sectionEmpty"></div>
<div class="row">
<div class="property">Details</div>
</div>
<div class="sectionEmpty"></div>
</div>
<div style="clear: both;"></div>
</div>
When I am not using bootstrap this setup works just fine. But when I wrap it all in bootstrap stuff it stops working. How do I fix that?
<style>
.card {
margin: 30px auto;
padding: 20px 40px 40px;
width: 450px;
height: 450px;
text-align: center;
background: #fff;
border-bottom: 4px solid #ccc;
border-radius: 6px;
}
.card:hover {
border-color: #75dcff;
}
.card:nth-child(even):hover {
border-color: #ff7c5e;
}
</style>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
Works just fine, but when I use bootstrap. It stops working. I've tried selecting the .row and .col-s6 but I cannot seem to get it to work. Using .card:nth-child)even):hover works to get it change all divs to the same color.
<div class="container">
<div class="row">
<div class="col-s6 col-sm">
<div class="card projects">
<h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
<a href="#">
<img src="#">
</a>
</div>
</div>
<div class="col-s6 col-sm">
<div class="card projects">
<h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
<a href="#">
<img src="#">
</a>
</div>
</div>
<div class="col-s6 col-sm">
<div class="card projects">
<h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
<a href="#">
<img src="#">
</a>
</div>
</div>
</div>
</div>
I can't figure out what element or class I need to use. I had somebody tell me that I wasn't grabbing a class. But if the class on the div is card and I'm selecting .card in my CSS file aren't I selecting a class?
Correct your selector from .card:nth-child(even):hover to .col-s6:nth-child(even) .card:hover
.card:nth-child(even):hover will select every even card within it's parent.
.col-s6:nth-child(even) .card:hover will select every even col-s6 and then it will affact it's child which is .card
.card {
margin: 30px auto;
padding: 20px 40px 40px;
width: 450px;
height: 450px;
text-align: center;
background: #fff;
border-bottom: 4px solid #ccc;
border-radius: 6px;
}
.card:hover {
border-color: #75dcff;
}
.col-s6:nth-child(even) .card:hover {
border-color: #ff7c5e;
}
<div class="container">
<div class="row">
<div class="col-s6 col-sm">
<div class="card projects">
<h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
<a href="#">
<img src="#">
</a>
</div>
</div>
<div class="col-s6 col-sm">
<div class="card projects">
<h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
<a href="#">
<img src="#">
</a>
</div>
</div>
<div class="col-s6 col-sm">
<div class="card projects">
<h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
<a href="#">
<img src="#">
</a>
</div>
</div>
</div>
</div>
Your problem is that each .card is wrapped in its own .col-s6.col-sm div.
So now every card is the first child of its container, and one is, of course, an odd number.
What you want to do is select the container element using :nth-child(even) and then add the hover to the card within that selection.
.col-sm:nth-child(even) .card:hover {
background-color: red;
}
<div class="container">
<div class="row">
<div class="col-s6 col-sm">
<div class="card projects">
<h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
<a href="#">
<img src="#">
</a>
</div>
</div>
<div class="col-s6 col-sm">
<div class="card projects">
<h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
<a href="#">
<img src="#">
</a>
</div>
</div>
<div class="col-s6 col-sm">
<div class="card projects">
<h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
<a href="#">
<img src="#">
</a>
</div>
</div>
</div>
</div>
I have a row with three divisions:
Image (two divs, text and text) Button
The only thing I'm able to do is pulling the button to right or bottom of the div, but not centering it, how can I achieve this?
My code:
<div class="row">
<div class="col-md-9 ">
<div class="row">
<div class="col-md-12">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
</div>
</div>
<div class="row list-group-item ">
<div class="col-md-3 text-center">
<img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-circle">
</div>
<div class="col-md-5 ">
<div class="row">
<div class="col-md-6 ">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
</div>
<div class="col-md-6">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
</div>
</div>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-success btn-lg pull-right">
Default
</button>
</div>
</div>
</div>
This is what I have:
This is what I want but I'm not able to achieve:
I want the button centred too
First of all no need to use this much nested rows and cols, you should try to achieve this result by using less html elements. Secondly divide your blocks into equal parts (use col-md-3 class four times).
<div class="row list-group-item ">
<div class="col-md-3 text-center vcenter">
<img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-circle">
</div>
<div class="col-md-3 vcenter">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
</div>
<div class="col-md-3 vcenter">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
</div>
<div class="col-md-3 vcenter text-center">
<button type="button" class="btn btn-success btn-lg">
Default
</button>
</div>
</div>
Finally use vertical alignment for your divs:
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
margin-left: -4px;
}
You can check fiddle here: https://jsfiddle.net/johannesMt/npgsnojf/3/
It achievs the same result by using much less html elements which makes your code more readable. Hope this helps!
First things first, You are already dividing some section which already has a width of 100%. (by using two col-6 inside a row). So that means they've been already expanding as far as possible in that row.
You should increase the col number in
<div class="col-md-5 ">
meanwhile decreasing button column
<div class="col-md-4">
In the end, you can design your structure in the following way:
<div class="row">
<div class="col-md-6 text-center">
<div class="centered-block">
<div>h3. Lorem ipsum dolor sit amet.</h3>
</div>
</div>
<div class="col-md-6 text-center">
<div class="centered-block">
<h3>h3. Lorem ipsum dolor sit amet.</h3>
</div>
</div>
</div>
with the following css rule:
.centered-block {
display: inline-block;
position: relative;
width: 100px; /* you would like to have a fixed width */
}
.centered-block > h3 {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
Haven't tested it out, but that should work.