I wanna to add space between columns on bootstrap grid.
Here is my html and css I use stock bootstrap v3.3.4
I try to use those topics:-
twitter bootstrap grid system. Spacing between columns
How do I add a margin between bootstrap columns without wrapping
Bootstrap: add margin/padding space between columns
.product-icon {
min-height: 30px;
position: relative;
top: 65px;
z-index: 999;
margin:0 auto;
}
.product-header
{
background-image:url("http://placehold.it/350x102");
background-size:cover;
border-bottom: 2px solid #94e059;
min-height: 102px;
}
.product-information
{
text-align:center;
}
.product-tiles
{
border: 2px solid #94e059;
}
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/softwaredev-icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="csd.html">Read more »</a></p>
<p><a class="btn btn-default" href="csd.html">Make inquiry »</a></p>
</div>
</div>
</div>
</div>
I don't want to use offset on columns.
Why don't you add an inner wrapper inside your bootstrap column and add padding to it? I'm not sure if this is what you're asking, but here's a demonstration:
.inner-wrapper {
padding: 0 25px; /* padding on both sides */
padding: 25px 0; /* padding for top and bottom */
padding: 25px; /* padding all along */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-4">
<div class="inner-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum ligula sit amet nibh placerat, nec malesuada nisi venenatis. Nullam sit amet ante sollicitudin, ullamcorper ante nec, posuere dolor. Nulla sodales porta orci, nec gravida ipsum volutpat vel. In hac habitasse platea dictumst. Maecenas maximus erat in laoreet tempus. Nunc quis vehicula tortor, et ornare velit. Ut sapien augue, cursus ut finibus ut, porta volutpat elit. Nunc auctor enim eu neque sodales ultricies quis ac ex. Mauris a placerat velit. Sed sagittis bibendum est, a malesuada libero scelerisque id. Curabitur rhoncus leo ac massa consectetur, sit amet bibendum mi maximus. Cras porttitor sodales neque, at sodales leo gravida eu. Etiam dui erat, pretium at euismod eget, blandit sit amet risus. Vivamus mollis, magna euismod luctus posuere, purus tellus venenatis arcu, sed eleifend ante massa eu massa. Integer tempor bibendum vulputate. Donec ut tellus vehicula, vestibulum quam vitae, pretium mi.</p>
</div>
</div>
<div class="col-xs-4">
<div class="inner-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum ligula sit amet nibh placerat, nec malesuada nisi venenatis. Nullam sit amet ante sollicitudin, ullamcorper ante nec, posuere dolor. Nulla sodales porta orci, nec gravida ipsum volutpat vel. In hac habitasse platea dictumst. Maecenas maximus erat in laoreet tempus. Nunc quis vehicula tortor, et ornare velit. Ut sapien augue, cursus ut finibus ut, porta volutpat elit. Nunc auctor enim eu neque sodales ultricies quis ac ex. Mauris a placerat velit. Sed sagittis bibendum est, a malesuada libero scelerisque id. Curabitur rhoncus leo ac massa consectetur, sit amet bibendum mi maximus. Cras porttitor sodales neque, at sodales leo gravida eu. Etiam dui erat, pretium at euismod eget, blandit sit amet risus. Vivamus mollis, magna euismod luctus posuere, purus tellus venenatis arcu, sed eleifend ante massa eu massa. Integer tempor bibendum vulputate. Donec ut tellus vehicula, vestibulum quam vitae, pretium mi.</p>
</div>
</div>
<div class="col-xs-4">
<div class="inner-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum ligula sit amet nibh placerat, nec malesuada nisi venenatis. Nullam sit amet ante sollicitudin, ullamcorper ante nec, posuere dolor. Nulla sodales porta orci, nec gravida ipsum volutpat vel. In hac habitasse platea dictumst. Maecenas maximus erat in laoreet tempus. Nunc quis vehicula tortor, et ornare velit. Ut sapien augue, cursus ut finibus ut, porta volutpat elit. Nunc auctor enim eu neque sodales ultricies quis ac ex. Mauris a placerat velit. Sed sagittis bibendum est, a malesuada libero scelerisque id. Curabitur rhoncus leo ac massa consectetur, sit amet bibendum mi maximus. Cras porttitor sodales neque, at sodales leo gravida eu. Etiam dui erat, pretium at euismod eget, blandit sit amet risus. Vivamus mollis, magna euismod luctus posuere, purus tellus venenatis arcu, sed eleifend ante massa eu massa. Integer tempor bibendum vulputate. Donec ut tellus vehicula, vestibulum quam vitae, pretium mi.</p>
</div>
</div>
</div>
Try set "margin-bottom"
.product-header
{
background-image:url("http://placehold.it/350x102");
background-size:cover;
border-bottom: 2px solid #94e059;
min-height: 102px;
margin-bottom: 20px;
}
If you're using BootStrap 3.3.7, you can use the open source library bootstrap-spacer via NPM
npm install bootstrap-spacer
or you can visit the github page:
https://github.com/chigozieorunta/bootstrap-spacer
Here's an example of how this works to space rows using the .row-spacer class:
<div class="row row-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
<div class="row row-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
If you'd require spaces between columns, you can also add the .row-col-spacer class:
<div class="row row-col-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
And you can also combine various the .row-spacer & .row-col-spacer classes together:
<div class="row row-spacer row-col-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
Check this code. How it work? Also read bootstrap documentation. It's bootstrap 3.3.7 Documentation. Look Bootstrap have margin less grid system. If you want to margin or white space between two or more column then your content will go inside the column grid. Don't write border, background-color with column. Create inside another div then write border background etc.
.product-icon {
min-height: 30px;
position: relative;
top: 65px;
z-index: 999;
margin:0 auto;
}
.product-header
{
background-image:url("http://placehold.it/350x102");
background-size:cover;
border-bottom: 2px solid #94e059;
min-height: 102px;
}
.product-information
{
text-align:center;
}
.product-tiles
{
border: 2px solid #94e059;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group">
<div class="product-tiles">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="product-header">
<img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group">
<div class="product-tiles">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="product-header">
<img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group">
<div class="product-tiles">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="product-header">
<img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group">
<div class="product-tiles">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="product-header">
<img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group">
<div class="product-tiles">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="product-header">
<img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group">
<div class="product-tiles">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="product-header">
<img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group">
<div class="product-tiles">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="product-header">
<img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hope this will help.
Related
This question already has an answer here:
Bootstrap 4 cards - align content at the bottom
(1 answer)
Closed 4 years ago.
I would like to align links to the bottom center of cards. I tried adding the classes d-flex and flex-column to .card-body and mt-auto to the link, as suggested elsewhere. Note I'm not using a container or container-fluid div class (Bootstrap documentation suggests going without one for an edge-to-edge design).
Relevant HTML (for full code view CodePen):
<div class="row portfolio">
<div class="col-sm-12">
<h2>Portfolio</h2>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project One</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Two</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Three</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Four</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Five</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Six</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
View CodePen
</div>
</div>
</div>
</div>
The link is placed on the end with d-flex and flex-column on card-body and mt-auto on the link. On your CodePen you are missing some of these classes (example with classes)!
Note: You can find this example also on the official documentation of Bootstrap 4.
To center the links you can use the text-center class on the card-link.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row portfolio">
<div class="col-sm-12">
<h2>Portfolio</h2>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project One</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Two</h4>
<p class="card-text ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Three</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Four</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Five</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Six</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
View CodePen
</div>
</div>
</div>
</div>
Add this css, it will work
.card-body {
display: flex;
flex-direction: column;
}
.card-link {
margin-top: auto;
}
codepen link
An alternative solution
You can align the link at the bottom of the card-body by following these three steps:
Apply the d-flex and flex-column classes to card-body
Wrap all the content of card-body in a div.
Use flex: 1 1 auto on this new div
Doing so, the newly created div always takes all the available space. Hence, the link is always at the bottom of the card-body.
.flex-grow {
flex: 1 1 auto;
}
<div class="card-body d-flex flex-column">
<div class="flex-grow">
<h4 class="card-title">Project One</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
</div>
View CodePen
</div>
Check this pen on CodePen
FYI, You can make an element occupy all the available space using this method.
What class i need to use to place second button on the same line with first button. I am using bootstrap 4.
<div class="container">
<div class="row justify-content-sm-center">
<div class="col-sm-5 kappa">
<h3>Don't have an account?</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quasi facere officiis numquam alias, delectus beatae autem facilis aliquid voluptates aspernatur, eaque suscipit possimus eveniet praesentium explicabo itaque nulla distinctio.
</p>
<button type="button">sign up</button>
</div>
<div class="col-sm-5 kappa">
<h3>Have an account?</h3>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit!
</p>
<button type="button" class="">login</button>
</div>
</div>
</div>
Since there is no code provided, assuming you are using Bootstrap 4 and apply flexbox css, in Bootstrap 4 the class is call .d-flex. After you apply .d-flex to parent all the direct descendant can be align easily using margin. In Bootstrap 4 it is call mt-auto and mb-0.
.bigcontainer{
height:300px;
background:grey;
width:40%;
float:left;
margin:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="bigcontainer d-flex flex-column">
<div>Title</div>
<div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue.Quisque semper eleifend odio eget feugiat. Curabitur id mi tristique, ultrices lectus quis, gravida tortor..</div>
<div class="mt-auto mb-0"><button>button</button></div>
</div>
<div class="bigcontainer d-flex flex-column">
<div>Title</div>
<div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue. </div>
<div class="mt-auto mb-0"><button>button</button></div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
.cs-button {
position: absolute;
bottom: 0;
margin-bottom: 20px;
}
</style>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="height: 200px;">
<div>Title</div>
<div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue.Quisque semper eleifend odio eget feugiat. Curabitur id mi tristique, ultrices lectus quis, gravida tortor..</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cs-button" style="padding:0" >
<div class="mt-auto mb-0"><button>button</button></div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="height: 200px;">
<div>Title</div>
<div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue. </div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cs-button" style="padding:0">
<div class="mt-auto mb-0"><button>button</button></div>
</div>
</div>
</div>
</div>
How can I remove the links of an HTML file?
I want remove the links:
Typography
Shortcodes
Tables
FAQ
I wan't remove the links:
<ul class="dropdown-menu">
<li>Home / Fixed</li>
<li>Home + Blog</li>
<li>Portfolio</li>
<li>Blog & News</li>
</ul>
</li>
<li>left sidebar</li>
<li>right sidebar</li>
<li>full page</li>
<li>contact us</li>
</ul>
This is my code, but it is not working:
#!/usr/bin/perl
########################################## Carrega Modulos
use LWP::UserAgent;
use LWP::Simple;
$ua = new LWP::UserAgent;
$ua->agent('Mozilla/5.0 (X11; U; NetBSD i386; en-US; rv:1.8.1.12) Gecko/20080301 Firefox/2.0.0.12');
my $pedido1 = new HTTP::Request GET =>"http://localhost/site1/index.html";
my $resposta1 = $ua->request($pedido1) or die "Error\n";
my $res1 = $resposta1->content;
open (OUT, ">>hit.txt"); print OUT "$res1\n"; close(OUT); $cont=$cont+1;
$res1 =~ s/"<li><a href=\"typography.html\">Typography<\/a><\/li>"/""/g;
$res1 =~ s/"<li><a href=\"shortcodes.html\">Shortcodes<\/a><\/li>"/""/g;
$res1 =~ s/"<li><a href=\"blog.html\">Blog & News<\/a><\/li>"/""/g;
$res1 =~ s/"<li><a href=\"tables.html\">Tables<\/a><\/li>"/""/g;
$res1 =~ s/"<li><a href=\"faq.html\">FAQ<\/a><\/li>"/""/g;
print $res1;
This my HTML:
<!DOCTYPE html>
Reponsive HTML Template
http://fonts.googleapis.com/css?family=Roboto:400,300,700,100' rel='stylesheet' type='text/css'>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-center navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"> Pages
<ul class="dropdown-menu">
<li>Home / Fixed</li>
<li>Home + Blog</li>
<li>Portfolio</li>
<li>Typography</li>
<li>Shortcodes</li>
<li>Blog & News</li>
<li>Tables</li>
<li>FAQ</li>
</ul>
</li>
<li>left sidebar</li>
<li>right sidebar</li>
<li>full page</li>
<li>contact us</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<div class="clr"></div>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<h1 class="navbar-brand"><span>anti</span>que</h1>
</div>
</nav>
<!-- Indicators -->
<div class="carousel-inner">
<div class="item"> <img data-src="images/slider/slider1.jpg" alt="First slide" src="images/slider/slider1.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Vivamus ultricies volutpat egestas. Donec <span>turpis non eros</span> euismod </h1>
<p>Aliquam sit amet lectus sagittis, feugiat neque dictum, rutrum augue. Integer vel egestas urna. </p>
<p><a class="btn btn-default" href="#" role="button">more details</a></p>
</div>
</div>
</div>
<div class="item active"> <img data-src="images/slider/slider2.jpg" alt="Second slide" src="images/slider/slider2.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Donec <span>volutpat mattis</span> odio. Quisque eros. Nullam malesuada. </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. </p>
<p><a class="btn btn-default" href="#" role="button">get started</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon carousel-control-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon carousel-control-right"></span></a> </div>
<h2 class="text-center">Phasellus ultrices nulla quis nibh. Quisque a lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h2>
<p class="text-center big-paragraph">Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<h2><span>our services</span></h2>
<div class="row">
<div class="col-md-4"> <img src="images/icons/ico1.png" alt="icon" class="icon">
<h3>CLEAN FLAT & MINIMAL</h3>
<img src="images/content__images/img1.jpg" alt="image" class="img-rounded img-responsive">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
<div class="col-md-4"> <img src="images/icons/ico2.png" alt="icon" class="icon">
<h3>FULLY RESPONSIVE</h3>
<img src="images/content__images/img2.jpg" alt="image" class="img-rounded img-responsive">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
<div class="col-md-4"> <img src="images/icons/ico3.png" alt="icon" class="icon">
<h3>EASY TO CUSTOMIZE</h3>
<img src="images/content__images/img3.jpg" alt="image" class="img-rounded img-responsive">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<h2 class="text-center"><span>about us</span></h2>
<div class="row text-center">
<div class="col-md-6">
<h3>Donec odio. Quisque volutpat mattis eros.
Nullam malesuada erat. </h3>
<p><small>Praesent semper mod quis eget mi. Etiam eu ante risus. </small></p>
<img src="images/content__images/pic1.jpg" class="img-rounded img-responsive" alt="pic1">
<div class="clearfix"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p><a class="btn btn-info btn-lg" href="#" role="button">Learn more</a></p>
</div>
<div class="col-md-6">
<h3>Etiam eu ante risus. Aliquam erat volutpat.
Aliquam luctus mattis.</h3>
<p><small>Praesent semper mod quis eget mi. Etiam eu ante risus. </small></p>
<img src="images/content__images/pic2.jpg" class="img-rounded img-responsive" alt="pic2">
<div class="clearfix"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p><a class="btn btn-info btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="container">
<h2 class="">Pellentesque egestas sem. Suspendisse commodo ullamcorper magna. Pellentesque egestas sem suspendisse commodo ullamcorper ...</h2>
<p class="">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.</p>
<p><a class="btn btn-info" href="#" role="button">Buy it</a><a class="btn btn-default" href="#" role="button">Learn More</a></p>
</div>
<h3>About</h3>
<p>We strive to deliver a level of service that exceeds the expectations of our customers. <br />
<br />
If you have any questions about our products or services, please do not hesitate to contact us. We have friendly, knowledgeable representatives available seven days a week to assist you.</p>
</div>
<div class="col-md-3">
<h3>Tweets</h3>
<p><span>Tweet</span> #You<br />
Etiam egestas, ipsum posuere accumsan sollicitudin, nulla mauris volutpat sem, sit amet rutrum risus. </p>
<p><span>Tweet</span> #You<br />
Quisque porta tellus vitae adipiscing molestie. Mauris et lacus blandit, malesuada.</p>
</div>
<div class="col-md-3">
<h3>Mailing list</h3>
<p>Subscribe to our mailing list for offers, news updates and more!</p>
<br />
<form action="#" method="post" class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">your email:</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="your email:">
</div>
<button type="submit" class="btn btn-primary">subscribe</button>
</form>
</div>
<div class="col-md-3">
<h3>Business</h3>
<p>Street<br />
City, State <br />
Country<br />
<br />
Phone: (111) 123-4567<br />
Fax: (111) 123-4567<br />
<br />
</p>
<div class="social__icons"> </div>
</div>
</div>
$('.carousel').carousel({ interval: 3500, // in milliseconds pause: 'none' // set to 'true' to pause slider on mouse hover })
Thanks very much
Use a parser to handle changes in HTML. XML::LibXML can parse HTML if it's not really ugly:
#!/usr/bin/perl
use warnings;
use strict;
use XML::LibXML;
my $html = ...; # load the HTML file
my $dom = 'XML::LibXML'->load_html(string => $html, recover => 1);
my #delete = qw( Typography Shortcodes Tables FAQ );
my $condition = join ' or ', map "text()='$_'", #delete;
for my $anchor ($dom->findnodes("//a[$condition]/..")) {
$anchor->parentNode->removeChild($anchor);
}
print $dom;
It removes not only the anchors, but their parent <li's as well.
How can I replace the "images/" of an HTML file to some other word (i.e. "bebe")?
This is my code, but it is not working:
#!/usr/bin/perl
########################################## Carrega Modulos
use LWP::UserAgent;
use LWP::Simple;
$ua = new LWP::UserAgent;
$ua->agent('Mozilla/5.0 (X11; U; NetBSD i386; en-US; rv:1.8.1.12) Gecko/20080301 Firefox/2.0.0.12');
my $pedido1 = new HTTP::Request GET =>"http://localhost/site1/index.html";
my $resposta1 = $ua->request($pedido1) or die "Erro no site scanner\n";
my $res1 = $resposta1->content;
open (OUT, ">>hit.txt"); print OUT "$res1\n"; close(OUT); $cont=$cont+1;
$res1 =~ s/"images"/"bebe"/g;
print $res1;
This my HTML:
<!DOCTYPE html>
Reponsive HTML Template
http://fonts.googleapis.com/css?family=Roboto:400,300,700,100' rel='stylesheet' type='text/css'>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-center navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"> Pages
<ul class="dropdown-menu">
<li>Home / Fixed</li>
<li>Home + Blog</li>
<li>Portfolio</li>
<li>Typography</li>
<li>Shortcodes</li>
<li>Blog & News</li>
<li>Tables</li>
<li>FAQ</li>
</ul>
</li>
<li>left sidebar</li>
<li>right sidebar</li>
<li>full page</li>
<li>contact us</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<div class="clr"></div>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<h1 class="navbar-brand"><span>anti</span>que</h1>
</div>
</nav>
<!-- Indicators -->
<div class="carousel-inner">
<div class="item"> <img data-src="images/slider/slider1.jpg" alt="First slide" src="images/slider/slider1.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Vivamus ultricies volutpat egestas. Donec <span>turpis non eros</span> euismod </h1>
<p>Aliquam sit amet lectus sagittis, feugiat neque dictum, rutrum augue. Integer vel egestas urna. </p>
<p><a class="btn btn-default" href="#" role="button">more details</a></p>
</div>
</div>
</div>
<div class="item active"> <img data-src="images/slider/slider2.jpg" alt="Second slide" src="images/slider/slider2.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Donec <span>volutpat mattis</span> odio. Quisque eros. Nullam malesuada. </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. </p>
<p><a class="btn btn-default" href="#" role="button">get started</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon carousel-control-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon carousel-control-right"></span></a> </div>
<h2 class="text-center">Phasellus ultrices nulla quis nibh. Quisque a lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h2>
<p class="text-center big-paragraph">Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<h2><span>our services</span></h2>
<div class="row">
<div class="col-md-4"> <img src="images/icons/ico1.png" alt="icon" class="icon">
<h3>CLEAN FLAT & MINIMAL</h3>
<img src="images/content__images/img1.jpg" alt="image" class="img-rounded img-responsive">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
<div class="col-md-4"> <img src="images/icons/ico2.png" alt="icon" class="icon">
<h3>FULLY RESPONSIVE</h3>
<img src="images/content__images/img2.jpg" alt="image" class="img-rounded img-responsive">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
<div class="col-md-4"> <img src="images/icons/ico3.png" alt="icon" class="icon">
<h3>EASY TO CUSTOMIZE</h3>
<img src="images/content__images/img3.jpg" alt="image" class="img-rounded img-responsive">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<h2 class="text-center"><span>about us</span></h2>
<div class="row text-center">
<div class="col-md-6">
<h3>Donec odio. Quisque volutpat mattis eros.
Nullam malesuada erat. </h3>
<p><small>Praesent semper mod quis eget mi. Etiam eu ante risus. </small></p>
<img src="images/content__images/pic1.jpg" class="img-rounded img-responsive" alt="pic1">
<div class="clearfix"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p><a class="btn btn-info btn-lg" href="#" role="button">Learn more</a></p>
</div>
<div class="col-md-6">
<h3>Etiam eu ante risus. Aliquam erat volutpat.
Aliquam luctus mattis.</h3>
<p><small>Praesent semper mod quis eget mi. Etiam eu ante risus. </small></p>
<img src="images/content__images/pic2.jpg" class="img-rounded img-responsive" alt="pic2">
<div class="clearfix"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p><a class="btn btn-info btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="container">
<h2 class="">Pellentesque egestas sem. Suspendisse commodo ullamcorper magna. Pellentesque egestas sem suspendisse commodo ullamcorper ...</h2>
<p class="">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.</p>
<p><a class="btn btn-info" href="#" role="button">Buy it</a><a class="btn btn-default" href="#" role="button">Learn More</a></p>
</div>
<h3>About</h3>
<p>We strive to deliver a level of service that exceeds the expectations of our customers. <br />
<br />
If you have any questions about our products or services, please do not hesitate to contact us. We have friendly, knowledgeable representatives available seven days a week to assist you.</p>
</div>
<div class="col-md-3">
<h3>Tweets</h3>
<p><span>Tweet</span> #You<br />
Etiam egestas, ipsum posuere accumsan sollicitudin, nulla mauris volutpat sem, sit amet rutrum risus. </p>
<p><span>Tweet</span> #You<br />
Quisque porta tellus vitae adipiscing molestie. Mauris et lacus blandit, malesuada.</p>
</div>
<div class="col-md-3">
<h3>Mailing list</h3>
<p>Subscribe to our mailing list for offers, news updates and more!</p>
<br />
<form action="#" method="post" class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">your email:</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="your email:">
</div>
<button type="submit" class="btn btn-primary">subscribe</button>
</form>
</div>
<div class="col-md-3">
<h3>Business</h3>
<p>Street<br />
City, State <br />
Country<br />
<br />
Phone: (111) 123-4567<br />
Fax: (111) 123-4567<br />
<br />
</p>
<div class="social__icons"> </div>
</div>
</div>
$('.carousel').carousel({
interval: 3500, // in milliseconds
pause: 'none' // set to 'true' to pause slider on mouse hover
})
Assuming failure is at REGEX.
Remove the quotes from your regular expression.
$res1 =~ s/images/bebe/g;
EDIT:
Looking at inferno's comment, you might want this instead. It will match images inside src and data-source attributes.
$res1 =~ s/(src|data-source)="images\//$1="bebe/g;
Be aware this is removing forward slash after 'images' so if that isn't your intention, you can either remove that part of the pattern or add it back in on the replacement side.
Option #1
$res1 =~ s/(src|data-source)="images/$1="bebe/g; # Removed from pattern
Option #2
$res1 =~ s/(src|data-source)="images\//$1="bebe\//g; # Added back in on replacement
As you can see in this image below, my content is not evenly aligned. Is there a way to evenly align my content in Bootstrap? For example, I wish for my images to all be aligned across each column. I dont mind if there is some white space between the paragraph and image.
use a separate .row div for the images below the current .row , and put the same kind of columns/divs with the same classes in there as you currently have for text and images.
Okay, this is a problem I came across early on when working with float-based grid systems.
Here's a sketch of how you might solve the problem with your current grid system in Bootstrap: http://jsbin.com/yolewusuza/
#media screen and (min-width: 992px) {
.content {
position: absolute;
top: 0;
left: 15px;
right: 15px;
bottom: 0;
}
.col-sm-4:after {
padding-bottom: 170%;
content: '';
display: block;
}
.content .image {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="content">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Videsne quam sit magna dissensio? Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Quamvis enim depravatae non sint, pravae tamen esse possunt. Negat enim summo bono afferre
incrementum diem. Laboro autem non sine causa; Minime vero istorum quidem, inquit. Duo Reges: constructio interrete.</p>
<div class="image">
<img style="width:100%;" src="https://placeholdit.imgix.net/~text?w=350&h=150">
<p>Image description text</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="content">
<h3>Heading</h3>
<p>Animi enim quoque dolores percipiet omnibus partibus maiores quam corporis. Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Ut in geometria, prima si dederis, danda sunt omnia. Potius inflammat, ut coercendi magis
quam dedocendi esse videantur. Ut proverbia non nulla veriora sint quam vestra dogmata. Omnes enim iucundum motum, quo sensus hilaretur. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia?</p>
<div class="image">
<img style="width:100%;" src="https://placeholdit.imgix.net/~text?w=350&h=150">
<p>Image description text</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="content">
<h3>Heading</h3>
<p>Quae est igitur causa istarum angustiarum? Vestri haec verecundius, illi fortasse constantius. Ego vero volo in virtute vim esse quam maximam; Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L. An dubium est, quin virtus ita
maximam partem optineat in rebus humanis, ut reliquas obruat? Negat esse eam, inquit, propter se expetendam. O magnam vim ingenii causamque iustam, cur nova existeret disciplina! Perge porro.</p>
<p>In qua quid est boni praeter summam voluptatem, et eam sempiternam? Si qua in iis corrigere voluit, deteriora fecit. Perge porro; Quippe: habes enim a rhetoribus; Quis est, qui non oderit libidinosam, protervam adolescentiam? Expectoque quid ad
id, quod quaerebam, respondeas.
</p>
<div class="image">
<img style="width:100%;" src="https://placeholdit.imgix.net/~text?w=350&h=150">
<p>Image description text</p>
</div>
</div>
</div>
</div>
</div>
Adjusting the padding-bottom on the column's newly created pseudo-element to suit your needs. You'll ideally need to limit the excerpt length.
Using the framework's .thumbnail component (with .caption) you can accomplish #Johannes suggestion like below, including adding your own height to the .caption like below. Make sure you adjust your height as required.
.caption{
min-height: 300px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo sapien vitae turpis pellentesque tempus. Nunc vehicula cursus ultricies. Sed aliquam hendrerit sapien quis blandit. Nam tempus condimentum nunc ac.</p>
</div>
<img src="http://lorempixel.com/300/300" alt="placeholder image">
</div>
</div>
<!-- 2 -->
<div class="col-xs-4">
<div class="thumbnail">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget tincidunt justo. Morbi ligula felis, accumsan eu auctor a, vulputate vel justo. Integer sapien nulla, rutrum at metus quis, rutrum porta risus. Vestibulum pulvinar metus nec luctus
euismod. Vivamus faucibus libero non magna vulputate laoreet.</p>
</div>
<img src="http://lorempixel.com/300/300" alt="placeholder image">
</div>
</div>
<!-- 3 -->
<div class="col-xs-4">
<div class="thumbnail">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec dui tellus. In imperdiet erat eros, sit amet scelerisque ante efficitur bibendum. Quisque tempor diam.</p>
</div>
<img src="http://lorempixel.com/300/300" alt="placeholder image">
</div>
</div>
</div>