Hey there I'm stuck and I'm looking for someone who's experienced with bootstrap.
This is my current situation:
And that's the corresponding code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig yellow" />
<h3 class="yellow">1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig lightgreen" />
<h3 class="lightgreen">3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig blue" />
<h3 class="blue">5</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig orange" />
<h3 class="orange">2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig green" />
<h3 class="green">4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig brown" />
<h3 class="brown">6</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>
</div>
My problem is that in tablet mode the tabs should be like this:
12
34
56
But right now they are like that:
And on Mobile they should look like this:
1
2
3
4
5
6
How can I achieve this?
I needed to re-arrange your code a bit and added some wrappers to achieve what you want
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig yellow" />
<h3 class="yellow">1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig orange" />
<h3 class="orange">2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig yellow" />
<h3 class="yellow">3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig orange" />
<h3 class="orange">4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig yellow" />
<h3 class="yellow">5</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig orange" />
<h3 class="orange">6</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
</div>
</div>
You can use like this for Bootstrap 3.3.7
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-6">
<hr class="hrBig yellow" />
<h3 class="yellow">1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-sm-12 col-xs-6">
<hr class="hrBig orange" />
<h3 class="orange">2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-6">
<hr class="hrBig lightgreen" />
<h3 class="lightgreen">3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-sm-12 col-xs-6">
<hr class="hrBig green" />
<h3 class="green">4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-6">
<hr class="hrBig blue" />
<h3 class="blue">5</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-sm-12 col-xs-6">
<hr class="hrBig brown" />
<h3 class="brown">6</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>
</div>
</div>
Related
I created a custom class with .columns with those properties:
.columns {
#apply flex flex-wrap gap-4 sm:gap-8 lg:gap-10
}
When I do basis-1/2 and put some items init I have only one column.
I understand it is because of the gap that extends the width but how can I do it work with a gap on row and column?
Here is the whole code (There will be more items but didn't want to make this post that long):
<div class="columns">
<div class="basis-1/2">
<div class="bg-white rounded-lg p-10">
<div class="flex flex-col text-left">
<div class="mb-6">
<img src="https://picsum.photos/id/237/536/35" alt="Test" class="rounded w-12 h-12">
</div>
<h4 class="typo-h4 mb-4">
Title
</h4>
<p class="typo-p1 mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus sodales commodo. Curabitur arcu arcu, pretium quis eros eu, lobortis convallis nulla. Curabitur gravida est odio, eget ornare tortor eleifend in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non molestie elit. </p>
<a href="#" class="typo-l1 pb-4">
Read more →
</a>
</div>
</div>
</div>
</div>
As far as for the row/column, if you want both the card in the same row including the gap classes you had given, just replace flex-wrap with flex-row.
Code given below
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row gap-4 sm:gap-8 lg:gap-10">
<div class="basis-1/2">
<div class="bg-yellow-50 rounded-lg p-10">
<div class="flex flex-col text-left">
<div class="mb-6">
<img src="https://picsum.photos/id/237/536/35" alt="Test" class="rounded w-12 h-12">
</div>
<h4 class="typo-h4 mb-4">
Title
</h4>
<p class="typo-p1 mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus sodales commodo. Curabitur arcu arcu, pretium quis eros eu, lobortis convallis nulla. Curabitur gravida est odio, eget ornare tortor eleifend in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non molestie elit. </p>
<a href="#" class="typo-l1 pb-4">
Read more →
</a>
</div>
</div>
</div>
<div class="basis-1/2">
<div class="bg-yellow-50 rounded-lg p-10">
<div class="flex flex-col text-left">
<div class="mb-6">
<img src="https://picsum.photos/id/237/536/35" alt="Test" class="rounded w-12 h-12">
</div>
<h4 class="typo-h4 mb-4">
Title
</h4>
<p class="typo-p1 mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus sodales commodo. Curabitur arcu arcu, pretium quis eros eu, lobortis convallis nulla. Curabitur gravida est odio, eget ornare tortor eleifend in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non molestie elit. </p>
<a href="#" class="typo-l1 pb-4">
Read more →
</a>
</div>
</div>
</div>
</div>
Please see code in full view
You can also achieve the same thing in the same column just by changing the flex direction from row to col.
Is it possible to arrange images in different divs using something similar to display: flex and order?
I want to make a grid 2 rows x 3 columns with an exact order of the images.
Actually, I tried Order with each image but with no results and I don’t know any other method!
Also, I’d want to use only HTML/CSS.
<div class="section-c__container__column2">
<div class="section-c__container__sub-column1">
<div class="block-slack">
<img src="img/logo-slack.png" alt="slack" class="slack">
<div class="sub-block-slack">
<h3 class="section-c__container__sub-heading">Slack</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
<div class="block-gsuite">
<img src="img/logo-gsuite.png" alt="gsuite" class="gsuite">
<div class="sub-block-gsuite">
<h3 class="section-c__container__sub-heading">GSuite</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
</div>
<div class="section-c__container__sub-column2">
<div class="block-trello">
<img src="img/logo-trello.png" alt="trello" class="trello">
<div class="sub-block-trello">
<h3 class="section-c__container__sub-heading">Trello</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
<div class="block-asana">
<img src="img/logo-asana.png" alt="asana" class="asana">
<div class="sub-block-asana">
<h3 class="section-c__container__sub-heading">Asana</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
</div>
<div class="section-c__container__sub-column3">
<div class="block-salesforce">
<img src="img/logo-salesforce.png" alt="salesforce" class="salesforce">
<div class="sub-block-salesforce">
<h3 class="section-c__container__sub-heading">Salesforce</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
<div class="block-typeform">
<img src="img/logo-typeform.png" alt="typeform" class="typeform">
<div class="sub-block-typeform">
<h3 class="section-c__container__sub-heading">Typeform</h3>
<p class="section-c__container__sub-par section-c__container__final-
sub">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
</div>
</div>
</div>
I have this html5 issue. currently the courses are displaying in 2 different rows. i need for it to be in one like no matter how many i add it keeps going to the left and but yes only 2 at a time.
something like this
1-------2
3-------4
5-------6
the current situation is like
1-------4
2-------5
3-------6
hope you could understand my point? here is the code
<!-- courses Start -->
<section class="section-space-padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="section-title">
<h1>Lorem ipsum</h1>
<div class="divider dark"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="courses">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="courses">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- courses End -->
Slightly modified structure to fix order of items and added some CSS rules to get rid of space between columns:
.row {
padding-left: 15px !important;
padding-right: 15px !important;
}
.row .col-md-6,
.row .col-sm-6,
.row .col-xs-6,
.row .col-sm-12 {
padding-left: 0px !important;
padding-right: 0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- courses Start -->
<section class="section-space-padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="section-title">
<h1>Lorem ipsum</h1>
<div class="divider dark"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="row">
<div class="courses">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 1</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 2</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 3</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 4</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 5</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 6</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- courses End -->
<div class="container">
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-6">2</div>
<div class="col-md-6">3</div>
<div class="col-md-6">4</div>
<div class="col-md-6">5</div>
<div class="col-md-6">6</div>
</div>
</div>
http://www.bootply.com/NVUPZtxxOy
How to remove this whitespace ->
I want to make that two image in the bottom to move up like the one on the right.
I think I shouldn't use col-md-* but still dont get the idea.
.portfolio {
}
.portfolio h4 {
font-size: 28px;
font-weight: 600;
font-family: 'Lora', serif;
margin-bottom: 20px;
}
.portfolio-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="portfolio col-md-10-col-md-offset-1">
<h4>Portfolio</h4>
<div class="row">
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt="">
<h3>Wongilang.xyz</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ8zJArifA6qRmMAvaZL_EGhHZsRYc4te-OtUqXABmoctaLpHw-pQ" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt="">
<h3>E-Monev SD/SMP/SMA Muhammadiyah DIY</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://okdogi.com/wp-content/uploads/2015/12/kucing-Scotish-fold-.jpg" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt="">
<h3>Wongilang.xyz</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ8zJArifA6qRmMAvaZL_EGhHZsRYc4te-OtUqXABmoctaLpHw-pQ" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt="">
<h3>E-Monev SD/SMP/SMA Muhammadiyah DIY</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://okdogi.com/wp-content/uploads/2015/12/kucing-Scotish-fold-.jpg" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales.</p>
</div>
</div>
</div>
</div>
</div>
It seems like your images have different height so you can see the white space below the first image and second image aren't the same and the last 2 images appear right after the 4th image (intanrahmadhani.web.id).
You can either resize/crop these images to make sure the height is consistent or apply a fixed height to the image container.
.portfolio h4 {
font-size: 28px;
font-weight: 600;
font-family: 'Lora', serif;
margin-bottom: 20px;
}
.portfolio-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
.portfolio-item > a:link,
.portfolio-item > a:visited {
display: block;
height: 300px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="portfolio">
<h4>Portfolio</h4>
<div class="row">
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x650" alt="">
<h3>Wongilang.xyz</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x450" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x250" alt="">
<h3>E-Monev SD/SMP/SMA Muhammadiyah DIY</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x550" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x350" alt="">
<h3>E-Monev SD/SMP/SMA Muhammadiyah DIY</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x750" alt="">
<h3>Wongilang.xyz</h3>
<p>...</p>
</div>
</div>
</div>
I have a page with navigation menu on left and body on right. Actually body is consist of sections on all long.
I would like to display only this section which I click on the left navigation menu. I try to make something like that:
https://www.virtualbox.org/wiki/VirtualBox
Actually I have:
<div class="intro-body">
<div style="padding-top: 120px;" class="container">
<p class="intro-text">title</p>
<div id="content" class="row">
<div class="col-md-2">
<ul style="list-style-type: none;">
<li> FirstOne </li>
<li> Second </li>
<li> Second2 </li>
</ul>
</div>
<div class="col-md-10">
<section id="FirstOne">
<h2>title title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, condimentum sed faucibus ac, aliquam vitae enim.
</p>
</section>
<section id="Second" style="padding-top: 60px;">
<h2>title title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, condimentum sed faucibus ac, aliquam vitae enim. Curabitur sit amet velit nibh.
</p>
</section>
<section id="Second2" style="padding-top: 60px;">
<h2>title title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, condimentum sed faucibus ac, aliquam vitae enim.
</p>
</section>
</div>
</div>
</div>
</div>
It's just the same design in all pages. You can use include to do ths or copy the code page to page. sorry on my bad english hope you understand.