Bootstrap columns contents

Bootstrap columns contents - html

Hello I've created a simple columns using bootstrap but there are problem that if the content of the first column is big the third column will be floated in the right:
#contact-me {
width: 100%;
padding: 40px 0;
/*font-family:Raleway, Arial, 'Open Sans';*/
}
#contact-me .contact-info-nested {
width: 100%;
margin-bottom: 20px;
text-align: center;
}
#contact-me .contact-info-nested i {
display: inline-block;
margin-bottom: 16px;
font-size: 50px;
}
#contact-me .contact-info h4 {
padding: 5px;
font-size: 16px;
line-height: 25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section id="contact-me">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="contact-info-nested">
<i class="fa fa-map-marker"></i>
<h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="contact-info-nested">
<i class="fa fa-phone"></i>
<h4>+93 345 678 91 23</h4>
</div>
</div>
<div class="clearfix"> </div>
<div class="col-md-4 col-sm-6">
<div class="contact-info-nested">
<i class="fa fa-envelope-o"></i>
<h4>penciltheme#gmail.com</h4>
</div>
</div>
</div>
</div>
</section>
Note: please run code snippet in fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
#contact-me {
width: 100%;
padding: 40px 0;
/*font-family:Raleway, Arial, 'Open Sans';*/
}
#contact-me .contact-info-nested {
width: 100%;
margin-bottom: 20px;
text-align: center;
}
#contact-me .contact-info-nested i {
display: inline-block;
margin-bottom: 16px;
font-size: 50px;
}
#contact-me .contact-info h4 {
padding: 5px;
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<section id="contact-me">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="contact-info-nested">
<i class="fa fa-map-marker"></i>
<h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4>
</div>
</div>
<div class="col-sm-4">
<div class="contact-info-nested">
<i class="fa fa-phone"></i>
<h4>+93 345 678 91 23</h4>
</div>
</div>
<div class="col-sm-4">
<div class="contact-info-nested">
<i class="fa fa-envelope-o"></i>
<h4>penciltheme#gmail.com</h4>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

Use col-lg-4 . Because col-lg-6 use in thee time and bootstrap column 12 then your last div below line . So i suggest to you can use col-lg-4 three in row then manage all column.
Bootstrap Grid
#contact-me {
width:100%;
padding:40px 0;
/*font-family:Raleway, Arial, 'Open Sans';*/
}
#contact-me .contact-info-nested{
width:100%;
margin-bottom:20px;
text-align:center;
}
#contact-me .contact-info-nested i{
display:inline-block;
margin-bottom:16px;
font-size:50px;
}
#contact-me .contact-info h4{
padding:5px;
font-size:16px;
line-height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="contact-me">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="contact-info-nested">
<i class="fa fa-map-marker"></i>
<h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4>
</div>
</div>
<div class="col-lg-4">
<div class="contact-info-nested">
<i class="fa fa-phone"></i>
<h4>+93 345 678 91 23</h4>
</div>
</div>
<div class="clear"></div>
<div class="col-lg-4">
<div class="contact-info-nested">
<i class="fa fa-envelope-o"></i>
<h4>penciltheme#gmail.com</h4>
</div>
</div>
</div>
</div>
</section>

User row when you want to add content in new float you need to use class=row. it will helpfull for this type of issue.
#contact-me {
width:100%;
padding:40px 0;
/*font-family:Raleway, Arial, 'Open Sans';*/
}
#contact-me .contact-info-nested{
width:100%;
margin-bottom:20px;
text-align:center;
}
#contact-me .contact-info-nested i{
display:inline-block;
margin-bottom:16px;
font-size:50px;
}
#contact-me .contact-info h4{
padding:5px;
font-size:16px;
line-height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="contact-me">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="contact-info-nested">
<i class="fa fa-map-marker"></i>
<h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4>
</div>
</div>
<div class="col-lg-6">
<div class="contact-info-nested">
<i class="fa fa-phone"></i>
<h4>+93 345 678 91 23</h4>
</div>
</div>
</div>
<div class="row">
<div class="clear"></div>
<div class="col-lg-6">
<div class="contact-info-nested">
<i class="fa fa-envelope-o"></i>
<h4>penciltheme#gmail.com</h4>
</div>
</div>
</div>
</div>
</section>

you can use this code <div class="clearfix visible-sm"></div> that this code will clear the float in the small screen:
#contact-me {
width:100%;
padding:40px 0;
/*font-family:Raleway, Arial, 'Open Sans';*/
}
#contact-me .contact-info-nested{
width:100%;
margin-bottom:20px;
text-align:center;
}
#contact-me .contact-info-nested i{
display:inline-block;
margin-bottom:16px;
font-size:50px;
}
#contact-me .contact-info h4{
padding:5px;
font-size:16px;
line-height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="contact-me">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="contact-info-nested">
<i class="fa fa-map-marker"></i>
<h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="contact-info-nested">
<i class="fa fa-phone"></i>
<h4>+93 345 678 91 23</h4>
</div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-4 col-sm-6">
<div class="contact-info-nested">
<i class="fa fa-envelope-o"></i>
<h4>penciltheme#gmail.com</h4>
</div>
</div>
</div>
</div>
</section>

The bootstrap's grid system is divided in 12, here'w an example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-12">
<center>
<h1>Column 1</h1>
</center>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<center>
<h1>Column 1</h1>
</center>
</div>
<div class="col-lg-6">
<center>
<h1>Column 2</h1>
</center>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<center>
<h1>Column 1</h1>
</center>
</div>
<div class="col-lg-4">
<center>
<h1>Column 2</h1>
</center>
</div>
<div class="col-lg-4">
<center>
<h1>Column 3</h1>
</center>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<center>
<h1>Column 1</h1>
</center>
</div>
<div class="col-lg-3">
<center>
<h1>Column 2</h1>
</center>
</div>
<div class="col-lg-3">
<center>
<h1>Column 3</h1>
</center>
</div>
<div class="col-lg-3">
<center>
<h1>Column 4</h1>
</center>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<center>
<h1>Column 1</h1>
</center>
</div>
<div class="col-lg-2">
<center>
<h1>Column 2</h1>
</center>
</div>
<div class="col-lg-2">
<center>
<h1>Column 3</h1>
</center>
</div>
<div class="col-lg-2">
<center>
<h1>Column 4</h1>
</center>
</div>
<div class="col-lg-2">
<center>
<h1>Column 5</h1>
</center>
</div>
<div class="col-lg-2">
<center>
<h1>Column 6</h1>
</center>
</div>
</div>
<div class="row">
<div class="col-lg-1">
<center>
<h4>Column 1</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 2</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 3</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 4</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 5</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 6</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 7</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 8</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 9</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 10</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 11</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 12</h4>
</center>
</div>
</div>
If you want to make 3 columns, you should use col-lg-4 in the divs' class instead of 6.

Related

How can I get this code to show fontawesome icons?

I am trying to create some service icon boxes next to the services that are provided. I have tried it in this method however it does not work. I think font-awesome icons could work with this code but I don't know much about font-awesome. The HTML and CSS have been included and you will see that the icons are not being shown.
<style>.y-us-section {
padding: 82px 0 82px;
}
.y-us-head {
text-align: center;
margin: 0 0 91px;
}
.y-us-title h2 {
color: #000;
font-size: 30px;
letter-spacing: 0;
line-height: 32px;
text-transform: uppercase;
margin-bottom: 6px;
}
.y-us-title>p {
color: #777777;
line-height: 22px;
}
.y-us-title-border {
background: #006600 none repeat scroll 0 0;
border-radius: 2px;
display: inline-block;
height: 3px;
position: relative;
width: 50px;
}
.service-3 .service-box {
margin-bottom: 18px;
}
.service-3 .service-box .iconset {
float: left;
text-align: center;
width: 25%;
}
.service-3 .service-box .iconset i {
color: #000;
font-size: 44px;
}
.service-3 .service-box .y-us-content {
float: left;
width: 75%;
}
service-3 .service-box .y-us-content h4 {
color: #3a3a3a;
font-size: 18px;
letter-spacing: 0;
line-height: 22px;
margin: 14px 0 12px;
text-transform: uppercase;
}
.service-3 .service-box .y-us-content p {
color: #777777;
font-size: 13px;
font-weight: 300;
line-height: 24px;
}
.icon {
color: #70AD4;
padding: 0px;
font-size: 40px;
border: 1px solid #70AD47;
border-radius: 100px;
color: #000000;
font-size: 28px;
height: 70px;
line-height: 70px;
text-align: center;
width: 70px;
}
<body>
<div class="y-us-section">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
<div class="y-us-head">
<div class="y-us-title">
</div>
</div>
</div>
</div>
<div style="clear: both">
<h3 style="float: left">Quality Assurance</h3>
<h3 style="float: right">Regulatory Affairs</h3>
</div>
<hr />
<br>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-content">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Quality Management Representative system</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Iso 13485 Implementation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Internal Audits</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Suppiler Audits</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>CE Marking Files</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>UKCA Marking</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>PRRC</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Biological Evaluation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Clinical Evaluation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>EU Authorised Representative</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>UK Responsible Person</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You seem to have exactly the right idea but Glyphicons are nothing to do with Font-Awesome.
Ensure that this line is added to the <head> of your page.
<script src="https://kit.fontawesome.com/d38a9ab6aa.js" crossorigin="anonymous"></script>
Then you can insert any icon from this page....
https://fontawesome.com/v5.15/icons ... In the same way you added the Glyphicons.

To have a small footprint (fast loading time), you may specify only icons you require.
------ Setup ------
-- Create folder 'webfonts' with subfolder 'font-awesome'
-- Copy 4 Font Awesome files (see below) in subforlder 'font-awesome'
-- Create a new file 'fontloader.css' in folder 'webfonts'
[webfonts]
+-- [font-awesome]
| +-- fa-solid-900.svg
| +-- fa-solid-900.ttf
| +-- fa-solid-900.woff
| +-- fa-solid-900.woff2
+-- fontloader.css
-- Insert the following css into file 'fontloader.css'
/* Font Awesome 5 Free */
#font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: auto;
src: url("../webfonts/font-awesome/fa-solid-900.woff2") format("woff2"),
url("../webfonts/font-awesome/fa-solid-900.woff") format("woff"),
url("../webfonts/font-awesome/fa-solid-900.ttf") format("truetype"),
url("../webfonts/font-awesome/fa-solid-900.svg#fontawesome") format("svg");
}
.fas, .far, .fab, .fa {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-family: 'Font Awesome 5 Free';
font-weight: 400;
font-style: normal;
font-variant: normal;
font-size: 1em;
line-height: 1;
text-rendering: auto;
}
-- Link the css to your html:
<link rel="stylesheet" href="URL/TO/webfonts/fontloader.css">
------ For each icon ------
-- Use https://fontawesome.com/icons/ to search icons.
/* Example: an 'house' icon, search it */
/* then use the hex code in this way */
.fa-house-user:before {
content: "\e065"
}
-- Now you can insert the icon into the html
<i class="fas fa-house-user"></i>

I hope this solution will help you. The format is not nice, but I kept your HTML as you provided and made the icons to show up.
<style>.y-us-section {
padding: 82px 0 82px;
}
.y-us-head {
text-align: center;
margin: 0 0 91px;
}
.y-us-title h2 {
color: #000;
font-size: 30px;
letter-spacing: 0;
line-height: 32px;
text-transform: uppercase;
margin-bottom: 6px;
}
.y-us-title>p {
color: #777777;
line-height: 22px;
}
.y-us-title-border {
background: #006600 none repeat scroll 0 0;
border-radius: 2px;
display: inline-block;
height: 3px;
position: relative;
width: 50px;
}
.service-3 .service-box {
margin-bottom: 18px;
}
.service-3 .service-box .iconset {
float: left;
text-align: center;
width: 25%;
}
.service-3 .service-box .iconset i {
color: #000;
font-size: 44px;
}
.service-3 .service-box .y-us-content {
float: left;
width: 75%;
}
service-3 .service-box .y-us-content h4 {
color: #3a3a3a;
font-size: 18px;
letter-spacing: 0;
line-height: 22px;
margin: 14px 0 12px;
text-transform: uppercase;
}
.service-3 .service-box .y-us-content p {
color: #777777;
font-size: 13px;
font-weight: 300;
line-height: 24px;
}
.icon {
color: #70AD4;
padding: 0px;
font-size: 20px;
border-radius: 100px;
color: #000000;
font-size: 28px;
height: 20px;
line-height: 20px;
text-align: center;
width: 20px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="y-us-section">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
<div class="y-us-head">
<div class="y-us-title">
</div>
</div>
</div>
</div>
<div style="clear: both">
<h3 style="float: left">Quality Assurance</h3>
<h3 style="float: right">Regulatory Affairs</h3>
</div>
<hr />
<br>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-content">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Quality Management Representative system</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Iso 13485 Implementation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Internal Audits</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Suppiler Audits</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>CE Marking Files</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>UKCA Marking</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>PRRC</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Biological Evaluation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Clinical Evaluation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>EU Authorised Representative</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>UK Responsible Person</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Unable to make Bootstrap columns of equal height

I using Bootstrap4 for my personal website and I am not able to make the columns of equal height.
I have looked for solutions here but the solutions don't seem to work on my code. I would appreciate any input.
<!-- Start projects section--->
<div id="projects" class="offset">
<!--- start jumbotron -->
<div class="jumbotron">
<div class="col-12 text-center">
<h3 class="heading">Projects</h3>
<div class="heading-underline"></div>
</div>
<div class="row">
<div class="col-md-6 projects">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8 text-left">
<h5 class="heading project-title">The Twitter Bakery (2018) </h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
<!--- image of client -->
<img src="img/mountains_trip.jpg" alt="image not displayed">
</div>
<div class="col-md-8">
<!--- text of client -->
<div>
Some words<br><br>Some more words
</div>
<hr class="projects-hr">
<i class="fab fa-github fa-2x"></i>
</div>
</div>
</div>
<div class="col-md-6 projects">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8 text-left">
<h5 class="heading project-title">Jersey Allocation (2018)</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
<!--- image of client -->
<img src="img/mountains_trip.jpg" alt="image not displayed">
</div>
<div class="col-md-8">
<!--- text of client -->
<div>
Some words.
</div>
<hr class="projects-hr">
<i class="fab fa-github fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
<!--- end jumbotron -->
</div>
<!-- end projects section--->
Here is my css for the section. The (.row and [class*="col-"]) rules are copied from the answers presented in the above link.
.row{
overflow: hidden;
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.projects img{
width:100%;
border-radius:10%;
}
.projects hr{
border-top:0.05rem solid #ad7232!important;
padding-bottom: 0.1rem;/* makes them visible in some cases*/
}
.project-link .svg-inline--fa{
align-self: center;
color: #505962 ;
}
.project-title{
text-transform: uppercase;
color: #ed9a00;
}
This is how the current section looks

Masonry in order [duplicate]

This question already has answers here:
How to Create Grid/Tile View? [duplicate]
(8 answers)
Closed 5 years ago.
I'm doing a list of posts for a blog and I want to do in Masonry. The problems I have found are:
The order when I load the posts is in columns so the order is like next:
1 3 5
2 4 6
And I want:
1 2 3
4 5 6
If I solve the second problem, it makes white space between rows.
Next I show an image about my problem:
So I want a solution like the after Masonry image. I have added the code in this fiddler
The HTML is:
<ul id="posts">
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title 1</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title 2</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title <br> Lorem <br> Ipsum</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title ramdom <br> lore</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title for test</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title <br> test</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title <br> a <br> five</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
</ul>
and the CSS:
#posts li {
display: inline-block;
margin: 0;
padding: 0;
width: 33%;
background: #efefef;
}
#posts li .bloglist {
width: 100%;
position: relative;
border: 1px solid #f1f1f1;
padding-bottom: 22px;
overflow: hidden;
}
.text-center {
text-align: center;
}
#posts li .bloglist .overflow {
z-index: 2;
}
.overflow {
background-color: #3994ce;
mix-blend-mode: multiply;
opacity: .8;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
}
#posts li .bloglist .post-content {
position: relative;
z-index: 3;
}
#posts li .bloglist .post-content .listHeader {
position: relative;
margin-bottom: 20px;
}
#posts li .bloglist .post-content .sbMeta {
position: relative;
width: 100%;
}
#posts li .bloglist .post-content .sbMeta .loader {
height: 1px;
width: 100px;
margin: 0 auto;
margin-bottom: 20px;
position: relative;
background: #fff;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
#posts li .bloglist .post-content .sbAuth {
width: 100%;
text-align: center;
margin-bottom: 40px;
}
#posts li .bloglist .post-content .sbAuth a {
color: #fff;
}
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#posts li .bloglist .post-content .sbFooter {
width: 90%;
position: absolute;
left: 50%;
transform: translate(-50%,0);
}

You can try creating masonry using column counts (CSS property).
Below is an example that can help you out.
HTML:
<ul id="posts">
<li>col 1</li>
<li>col 2</li>
<li>col 3</li>
<li>col 4</li>
<li>col 5</li>
<li>col 6</li>
</ul>
CSS:
#posts { /* Masonry container */
column-count: 3;
column-gap: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-ms-column-gap: 1em;
}
#posts li { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
Here is the fiddle for it:-
https://jsfiddle.net/ug5oy087/

Materialize - Button in Card won't go center

I have a card in which there is button (Start button) which won't go to the center of the card.
I tried center-align class, but that won't do it. I also tried using my id and class and trying text-align: center; in my css. But that did not work either.
Don't know what I'm missing.
Here is what I have:
This is what I want:
Here is the full html:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--navbar-->
<header>
<nav>
<div class="nav-wrapper light-blue darken-3">
Kviz
<!--
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li>test</li>
</ul>
-->
</div>
</nav>
</header>
<main>
<div class="row">
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/kvizslika.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Kako se radi kviz ?
<a class="waves-effect light-blue darken-3 btn activator right">Instrukcije</a>
</span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Instrukcije<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab"><a class="active" href="#korak1">Poeni</a></li>
<li class="tab">Odgovori</li>
<li class="tab">Vreme</li>
</ul>
</div>
<div class="card-content grey lighten-4">
<div id="korak1">Test 1. Bla bla. <br/> Bla bla.</div>
<div id="korak2">Test 2</div>
<div id="korak3">Test 3</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="row">
<div class="col s12 m12">
<div class="card light-blue darken-3">
<div class="card-content white-text">
<span class="card-title naslovPrijava">Prijava</span>
</div>
</div>
</div>
<div class="col s12 m12">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 1:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name" type="text" class="validate">
<label for="first_name">Ime</label>
</div>
<div class="input-field">
<input id="last_name" type="text" class="validate">
<label for="last_name">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 2:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name2" type="text" class="validate">
<label for="first_name2">Ime</label>
</div>
<div class="input-field">
<input id="last_name2" type="text" class="validate">
<label for="last_name2">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 3:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name3" type="text" class="validate">
<label for="first_name3">Ime</label>
</div>
<div class="input-field">
<input id="last_name3" type="text" class="validate">
<label for="last_name3">Prezime</label>
</div>
</form>
</div>
</div>
</div>
</div>
<button class="btn-large waves-effect waves-light light-blue darken-3 dugmeStart" type="submit" name="action">Start
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer light-blue darken-4">
<div class="footer-copyright">
<div class="container">
<center> © 2017 VTŠ Apps Team </center>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
Here is the full css:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: rgb(232,232,232);
}
main {
flex: 1 0 auto;
}
.tabs .tab a{
color:#00ACC1;
}
.tabs .tab a:hover,.tabs .tab a.active {
background-color:transparent;
color:#00ACC1;
}
.tabs .tab.disabled a,.tabs .tab.disabled a:hover {
color:rgba(102,147,153,0.7);
}
.tabs .indicator {
background-color:#00ACC1;
}
.naslovPrijava{
font-size: 20px !important;
text-align: center;
height: 18px;
}
.naslovUcesnik{
font-size: 18px !important;
text-align: left;
margin-left:-15px;
margin-top: -15px;
}
.pomeriKarticu{
margin-left:-35px;
height: 50px;
}
.dugmeStart{
text-align: center;
}

You have to use the center-align class on a parent element of the button, so I added a parent with class="center-align"
body {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: rgb(232, 232, 232);
}
main {
flex: 1 0 auto;
}
.tabs .tab a {
color: #00ACC1;
}
.tabs .tab a:hover,
.tabs .tab a.active {
background-color: transparent;
color: #00ACC1;
}
.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
color: rgba(102, 147, 153, 0.7);
}
.tabs .indicator {
background-color: #00ACC1;
}
.naslovPrijava {
font-size: 20px !important;
text-align: center;
height: 18px;
}
.naslovUcesnik {
font-size: 18px !important;
text-align: left;
margin-left: -15px;
margin-top: -15px;
}
.pomeriKarticu {
margin-left: -35px;
height: 50px;
}
.dugmeStart {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!--navbar-->
<header>
<nav>
<div class="nav-wrapper light-blue darken-3">
Kviz
<!--
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li>test</li>
</ul>
-->
</div>
</nav>
</header>
<main>
<div class="row">
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/kvizslika.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Kako se radi kviz ?
<a class="waves-effect light-blue darken-3 btn activator right">Instrukcije</a>
</span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Instrukcije<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab"><a class="active" href="#korak1">Poeni</a></li>
<li class="tab">Odgovori</li>
<li class="tab">Vreme</li>
</ul>
</div>
<div class="card-content grey lighten-4">
<div id="korak1">Test 1. Bla bla. <br/> Bla bla.</div>
<div id="korak2">Test 2</div>
<div id="korak3">Test 3</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="row">
<div class="col s12 m12">
<div class="card light-blue darken-3">
<div class="card-content white-text">
<span class="card-title naslovPrijava">Prijava</span>
</div>
</div>
</div>
<div class="col s12 m12">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 1:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name" type="text" class="validate">
<label for="first_name">Ime</label>
</div>
<div class="input-field">
<input id="last_name" type="text" class="validate">
<label for="last_name">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 2:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name2" type="text" class="validate">
<label for="first_name2">Ime</label>
</div>
<div class="input-field">
<input id="last_name2" type="text" class="validate">
<label for="last_name2">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 3:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name3" type="text" class="validate">
<label for="first_name3">Ime</label>
</div>
<div class="input-field">
<input id="last_name3" type="text" class="validate">
<label for="last_name3">Prezime</label>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="center-align">
<button class="btn-large waves-effect waves-light light-blue darken-3 dugmeStart" type="submit" name="action">Start
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer light-blue darken-4">
<div class="footer-copyright">
<div class="container">
<center> © 2017 VTŠ Apps Team </center>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>

You can use margin to achieve this also
.dugmeStart {
text-align: center;
display: block;/**Added This**/
margin: 0 auto; /**Added This**/
}

Remove blank space from the right side of the webpage with Bootstrap

So it seems it's a typical problem, but I haven't been able to remove that bloody blank space that completely disfigures my webpage on mobile view.
I have tried to remove individually each element to see what's happening, but I can't see it.
HTML code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<!--Boostrap jQuery-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<!--Boostrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!--Favicon-->
<link rel="icon" type="image/png" href="media/favicon-32x32.png" sizes="32x32" />
<!--Mi CSS-->
<link rel="stylesheet" type="text/css" href="estilo.css">
<title> TRAMA & DRAMA | Vestuario y producción</title>
</head>
<body>
<!-- navbar -->
<nav id="navegacion" class="navbar navbar-default navbar-fixed-top navbar-wrapper">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>¿Quiénes somos?</li>
<li>¿Qué hacemos?</li>
<li>
<img id="logo" src="media/logo-menu.png" alt="">
</li>
<li>Nuestros proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>
</nav>
<!--fin del navbar-->
<!--Barra rosa única del navbar-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-nav"></div>
</div>
</div>
<!--Sldeshow -->
<div class="container-fluid">
<div class="row ">
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 text-center img-responsive" id="id-quienes">
<img id="img-vestido" src="media/vestido.png" alt="Vestido">
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans" id="hacemos">
<h1>¿Qué hacemos?</h1>
</div>
</div>
<br>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-renta.png" alt="">
<p class="hacemos-headers"><b>Renta de vestuario</b></p>
<!--<p class="hacemos-descripciones fuente-merri">Nosotros hacemos muchas cosas bien chodas</p>-->
</div>
<div class="col-sm-4">
<img src="media/icono-coordinacion.png" alt="">
<p class="hacemos-headers"><b>Coordinación de vestuario</b></p>
</div>
<div class="row">
<img src="media/icono-diseno.png" alt="">
<p class="hacemos-headers"><b>Diseño de vestuario</b></p>
</div>
</div>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-espacios.png" alt="">
<p class="hacemos-headers"><b>Renta de espacios para cursos</b></p>
</div>
<div class="col-sm-4">
<img src="media/icono-realizacion.png" alt="">
<p class="hacemos-headers"><b>Realización</b></p>
</div>
<div class="row">
<img src="media/icono-mantenimiento.png" alt="">
<p class="hacemos-headers"><b>Mantenimiento de vestuario</b></p>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div id="proyectos">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Nuestros proyectos</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<p>Nos interesa que conozcas más a fondo los proyectos que llevamos a cabo en <b>Trama & Drama</b>.</p>
</div>
</div>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-4">
<img src="media/circ-1.png" alt="">
<h4>Diseño de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-2.png" alt="">
<h4>Producción y coordinación de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-3.png" alt="">
<h4>Renta de vestuario</h4>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-6">
<img src="media/circ-4.png" alt="">
<h4>Servicio social</h4>
</div>
<div class="col-sm-6">
<img src="media/circ-5.png" alt="">
<h4>Actividades del mes</h4>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Contacto</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<div id="contacto-desc">
<p>¡Nos encantan los nuevos retos! Escríbemos, llámanos o platícanos de tu proyecto.</p>
</div>
</div>
</div>
<div class="row text-center">
<form role="form">
<div class="form-group">
<input type="text" name="" value="" placeholder="Tu nombre o el nombre de la empresa">
</div>
<div class="form-group">
<input type="email" name="" value="" placeholder="Correo electrónico">
</div>
<div class="form-group">
<input id="textfield" type="text" name="" value="" placeholder="Tu mensaje">
</div>
<button type="button" class="btn btn-primary">ENVIAR</button>
</form>
</div>
<br>
<div class="row text-center fuente-merri">
<p class="ch">Teléfonos</p>
<p class="cs">044 55 5601 1231</p>
<br>
<p class="ch">Correo eletrónico</p>
<p class="cs">info#tramaydrama.mx</p>
<br>
<p class="ch">Dirección</p>
<p class="cs">Eligio Villamar, No. 20, San Diego Churubusco. C.P: 04120, Delegación Coyoacan</p>
</div>
</div>
<br>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-negra"></div>
</div>
</div>
<!--Footer-->
<footer>
<div class="container">
<div class="row fuente-sans">
<div class="col-sm-12 text-center" id="futer">
<a target="_blank" href="https://www.facebook.com/tramaydrama/?fref=ts"><img src="media/icono-fb.png" alt="Facebook"></a>
<img src="media/icono-inst.png" alt="Instagram">
<img src="media/icono-vimeo.png" alt="vimeo">
<p id="copyrights">Copyright Trama & Drama 2016 ©. Todos los derechos reservados | Página web por <a target="_blank"
href="http://animanoir.com"><b>Animanoir/Claque</b></a> | Diseño por <b>Cúmulo</b>.</p>
</div>
</div>
</div>
</footer>
<!--Bootstrap jQuery-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body>
</html>
CSS code:
/*Fuentes*/
#import 'https://fonts.googleapis.com/css?family=Lora:700i'; /*Header*/
#import 'https://fonts.googleapis.com/css?family=Merriweather'; /*Títulos*/
#import 'https://fonts.googleapis.com/css?family=Open+Sans:300'; /*Subtítulos*/
body{
padding-top: 70px;
overflow: hidden
}
footer{
background-color: #B7254E;
color: white;
}
/*Los botones dentro de una font: ;ma*/
form > button{
width: 50%;
background-color: #5A1741 !important;
text-align: left !important;
}
/*ids*/
#copyrights{
padding-top: 25px;
}
#futer{
padding-top: 25px;
padding-bottom: 25px;
}
#textfield{
height: 150px;
}
#proyectos{
background-color: #5A1741;
color: white;
}
#id-quienes{
color: white;
background-color: #5A1741;
padding-top: 10px;
padding-bottom: 10px;
}
#imagen-fondo{
position: relative;;
z-index: -1;
}
#logo{
width: 13em;
}
#contacto-desc{
color: #692C52;
font-weight: bold;
}
#pasion-div{
background-image: url("media/portada-mejor.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height: 650px;
padding: 13px;
font-size: 1.2em;
/*Para que se centre el texto*/
display: table;
width: 100%;
}
#pasion-div > div{
display: table-cell;
vertical-align: middle;
text-align: center;
}
#pasion-texto{
font-family: 'Lora', serif;
color: white;
font-size: 5em;
/*width: 400px;*/
}
#quienes{
background-color: #5A1741;
height: 200px;
}
/*clases*/
.ch{
font-weight: bold;
color: #5A1741;
}
.cs{
color: #5A1741;
color: #B7254E;
}
.navbar-nav{
background-color: white;
font-weight: bold;
}
.navbar-nav {
display:table;
width:100%;
margin: 0;
color: #B7254E;
}
.navbar-nav > li {
float:none;
display:table-cell;
text-align:center;
}
.navbar a{
color: #B7254E !important;
}
.barraRosa-nav{
width: 100%;
height: 45px;
background-color: #B7254E;
}
.barraRosa{
width: 100%;
height: 5px;
background-color: #B7254E;
}
.barraRosa-negra{
width: 100%;
height: 5px;
background-color: #5A1741
}
.hacemos-descripciones{
color: #B7254E;
}
.hacemos-headers{
color: #5A1741;
}
.fuente-merri{
font-family: 'Merriweather', serif;
}
.fuente-sans{
font-family: 'Open Sans', sans-serif;
}
/*Posicionar verticalmente en el centro*/
.vertical-align {
vertical-align: middle;
display: inline-block;
}
.form-group > input{
width: 50%;
}

Try this:
body {
overflow-x: hidden;
}

Try to add
html, body { margin: 0; }

I think you used to much class="row" even if there is no child columns.
for example you did this
<!--Sldeshow -->
<div class="container-fluid">
<div class="row "> /*remove this class="row" because you're not using col*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
and it should be like this
<!--Sldeshow -->
<div class="container-fluid">
<div> /*yep, this is right*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
so why removing the class row?
if you look at bootstrap.css you can see the .row have margin: 0 -15px, so why is that?
so that it can remove the excess 15px of the col-xx-00 class.
So try removing the class='row' that occupies the unnecessary white spaces.
here, i tried to remove the unnecessary rows.
<!-- navbar -->
<nav id="navegacion" class="navbar navbar-default navbar-fixed-top navbar-wrapper">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>¿Quiénes somos?</li>
<li>¿Qué hacemos?</li>
<li>
<img id="logo" src="media/logo-menu.png" alt="">
</li>
<li>Nuestros proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>
</nav>
<!--fin del navbar-->
<!--Barra rosa única del navbar-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-nav"></div>
</div>
</div>
<!--Sldeshow -->
<div class="container-fluid">
<div> /*removed class="row" here*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 text-center img-responsive" id="id-quienes">
<img id="img-vestido" src="media/vestido.png" alt="Vestido">
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans" id="hacemos">
<h1>¿Qué hacemos?</h1>
</div>
</div>
<br>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-renta.png" alt="">
<p class="hacemos-headers"><b>Renta de vestuario</b></p>
<!--<p class="hacemos-descripciones fuente-merri">Nosotros hacemos muchas cosas bien chodas</p>-->
</div>
<div class="col-sm-4">
<img src="media/icono-coordinacion.png" alt="">
<p class="hacemos-headers"><b>Coordinación de vestuario</b></p>
</div>
<div class="row">
<img src="media/icono-diseno.png" alt="">
<p class="hacemos-headers"><b>Diseño de vestuario</b></p>
</div>
</div>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-espacios.png" alt="">
<p class="hacemos-headers"><b>Renta de espacios para cursos</b></p>
</div>
<div class="col-sm-4">
<img src="media/icono-realizacion.png" alt="">
<p class="hacemos-headers"><b>Realización</b></p>
</div>
<div> /*removed class="row" here*/
<img src="media/icono-mantenimiento.png" alt="">
<p class="hacemos-headers"><b>Mantenimiento de vestuario</b></p>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div id="proyectos">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Nuestros proyectos</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<p>Nos interesa que conozcas más a fondo los proyectos que llevamos a cabo en <b>Trama & Drama</b>.</p>
</div>
</div>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-4">
<img src="media/circ-1.png" alt="">
<h4>Diseño de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-2.png" alt="">
<h4>Producción y coordinación de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-3.png" alt="">
<h4>Renta de vestuario</h4>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-6">
<img src="media/circ-4.png" alt="">
<h4>Servicio social</h4>
</div>
<div class="col-sm-6">
<img src="media/circ-5.png" alt="">
<h4>Actividades del mes</h4>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Contacto</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<div id="contacto-desc">
<p>¡Nos encantan los nuevos retos! Escríbemos, llámanos o platícanos de tu proyecto.</p>
</div>
</div>
</div>
<div class="text-center"> /*removed class="row" here*/
<form role="form">
<div class="form-group">
<input type="text" name="" value="" placeholder="Tu nombre o el nombre de la empresa">
</div>
<div class="form-group">
<input type="email" name="" value="" placeholder="Correo electrónico">
</div>
<div class="form-group">
<input id="textfield" type="text" name="" value="" placeholder="Tu mensaje">
</div>
<button type="button" class="btn btn-primary">ENVIAR</button>
</form>
</div>
<br>
<div class="row text-center fuente-merri">
<p class="ch">Teléfonos</p>
<p class="cs">044 55 5601 1231</p>
<br>
<p class="ch">Correo eletrónico</p>
<p class="cs">info#tramaydrama.mx</p>
<br>
<p class="ch">Dirección</p>
<p class="cs">Eligio Villamar, No. 20, San Diego Churubusco. C.P: 04120, Delegación Coyoacan</p>
</div>
</div>
<br>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-negra"></div>
</div>
</div>
<!--Footer-->
<footer>
<div class="container">
<div class="row fuente-sans">
<div class="col-sm-12 text-center" id="futer">
<a target="_blank" href="https://www.facebook.com/tramaydrama/?fref=ts"><img src="media/icono-fb.png" alt="Facebook"></a>
<img src="media/icono-inst.png" alt="Instagram">
<img src="media/icono-vimeo.png" alt="vimeo">
<p id="copyrights">Copyright Trama & Drama 2016 ©. Todos los derechos reservados | Página web por <a target="_blank"
href="http://animanoir.com"><b>Animanoir/Claque</b></a> | Diseño por <b>Cúmulo</b>.</p>
</div>
</div>
</div>
</footer>
or if you want, instead of removing rows, add col-sm-12 to the following tag. For example <div class="row"><div class="col-sm-12"><p>hey~</p></div></div>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Bootstrap columns contents - html

Related

How can I get this code to show fontawesome icons?

Unable to make Bootstrap columns of equal height

Masonry in order [duplicate]

Materialize - Button in Card won't go center

Remove blank space from the right side of the webpage with Bootstrap

Categories

Resources