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>
Related
Greetings i am kinda new to boostrap, Anyhow, I am trying to Create is, Boxes to look like this (right side):
And so far i got nothing. i used padding but it mess up my grid system, what i did was give a col-sm-8 for picture side and a col-sm-4 for boxes however it is where it gets tricky it always mess my grid system. this is my html. could you help me out a little bit?
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="xxxx" />
</div>
<div class="col-sm-4">
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Oven
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Cookers
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Microwave Ovens
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Steamers
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Cooker hoods
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Hobs
</div>
</div>
</div>
</div>
</div>
You are missing a row class, it's mandatory for nested rows/columns, so you can do this (go full page to see the result as you want) :
.box {
background-color: grey;
padding: 25px;
text-align: center;
vertical-align: middle;
margin: 10px;
}
img {
max-width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="https://lorempixel.com/800/400/" />
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">
<div class="box">
Oven
</div>
</div>
<div class="col-sm-6">
<div class="box">
Cookers
</div>
</div>
<div class="col-sm-6">
<div class="box">
Microwave
</div>
</div>
<div class="col-sm-6">
<div class="box">
Steamers
</div>
</div>
<div class="col-sm-6">
<div class="box">
Cooker hoods
</div>
</div>
<div class="col-sm-6">
<div class="box">
Hobs
</div>
</div>
</div>
</div>
</div>
</div>
You can read more about grid nesting
Hi guys so i am making a simple diagram which has 5 boxes and then arrows after them so it should look like this :
- > - > - > - > -
However for some reason i have an extra arrow appearing after the fifth box and i dont want this, Any help on getting rid of the last arrow would be great
.work_process {
position: relative;
text-align: center;
margin: 0 auto;
}
.work_process:before {
font-family: FontAwesome;
content: '\f178';
margin-top: -10px;
position: absolute;
right: -10px;
top: 40%;
font-size: 32px;
}
.work_process .work_process-box {
outline: 4px solid #FFFFFF;
border-radius: 50%;
height: 120px;
margin: 2em auto 3em;
padding: 16px 10px;
width: 120px;
}
.work_process-box i {
font-size: 32px;
line-height: 52px;
width: 52px;
color: #FFFFFF;
}
.work_process-box h4 {
font-weight: 400;
margin: 0;
color: #FFFFFF;
}
<div class="parallax2">
<div class="info1">
<h1>DESGIN PROCESS</h1>
<span class="border"></span>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-lightbulb-o"></i>
<h4>IDEA</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-bank"></i>
<h4>DESIGN</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-comments-o"></i>
<h4>DEVELOP</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-desktop"></i>
<h4>TEST</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-rocket"></i>
<h4>LAUNCH</h4>
</div>
</div>
<!-- work_process -->
</div>
</div>
</div>
</div>
This following code will fix it:
.row > div:last-child .work_process:before { content: ""; }
This code selects the last immediate child of the .row div, and selects the .work_process:before of that child, and sets the content to nothing.
.row > div:last-child .work_process:before { content: ""; }
.work_process {
position: relative;
text-align: center;
margin: 0 auto;
}
.work_process:before {
font-family: FontAwesome;
content: '\f178';
margin-top: -10px;
position: absolute;
right: -10px;
top: 40%;
font-size: 32px;
}
.work_process .work_process-box {
outline: 4px solid #FFFFFF;
border-radius: 50%;
height: 120px;
margin: 2em auto 3em;
padding: 16px 10px;
width: 120px;
}
.work_process-box i {
font-size: 32px;
line-height: 52px;
width: 52px;
color: #FFFFFF;
}
.work_process-box h4 {
font-weight: 400;
margin: 0;
color: #FFFFFF;
}
<div class="parallax2">
<div class="info1">
<h1>DESGIN PROCESS</h1>
<span class="border"></span>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-lightbulb-o"></i>
<h4>IDEA</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-bank"></i>
<h4>DESIGN</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-comments-o"></i>
<h4>DEVELOP</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-desktop"></i>
<h4>TEST</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-rocket"></i>
<h4>LAUNCH</h4>
</div>
</div>
<!-- work_process -->
</div>
</div>
</div>
</div>
How can I use the same height in row that keeps the site responsive? For example I have two x_panel with rows and columns inside but the height is different, i tried use display flex, but it change inside columns...
Here is a code to you understand what I'm trying to do:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel tile">
<div class="x_content">
<div class="row x_title">
<h3>Ponto de Venda:<small id="node_name"></small></h3>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-5 col-sm-5 col-xs-12">
<h5>Período de Avaliação:</h5>
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 100%; text-align: center; border: 1px solid #ccc">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span id="grafico_medias"></span> <b class="caret"></b>
</div>
</div>
</div>
</div>
<div class="row tile_count text-center">
<div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total de Pedestres</span>
<div id="displayPedestres" class="count"></div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count">
<span class="count_top"><i class="fa fa-eye"></i> Visualizações</span>
<div id="displayInteracoes" class="count"></div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count">
<span class="count_top"><i class="fa fa-refresh"></i> Taxa de Conversão</span>
<div id="displayTaxa" class="count green"></div>
</div>
</div>
</div>
</div>
</div>
<!-- /Informacoes medias -->
<!-- Meta -->
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel tile">
<div class="x_content">
<div class="row x_title">
<h3>Meta</h3>
</div>
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
<h5>Meta do</h5>
</div>
<div class="col-md-9 col-sm-6 col-xs-6" style="text-align: right">
<select id="metaPeriodo" onchange="meta()" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 100%; text-align: center; border: 1px solid #ccc">
<option>dia</option>
<option>mês</option>
<option>trimestre</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
<h5>em</h5>
</div>
<div class="col-md-9 col-sm-6 col-xs-6" style="text-align: right">
<select id="metaVariavel" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 100%; text-align: center; border: 1px solid #ccc" id="tipo_meta" onclick="meta()">
<option>pedestres</option>
<option>visualizações</option>
<option>taxa de conversão</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<input id="metaInput" type="text" class="form-control has-feedback" placeholder="Insira aqui a meta" style="height: 68px; font-size: 40px; font-weight: 600; color: #73879C; text-align: center">
</div>
</div>
</div>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="row">
<div class="sidebar-widget text-center">
<h4 style="text-align: center;">Cumprimento da Meta</h4>
<canvas width="140" height="80" id="foo" class="" style="width: 150px; height: 100px;"></canvas>
<div class="goal-wrapper" style="text-align: center;">
<span class="gauge-value pull-center"></span>
<span id="gauge-text" class="gauge-value pull-center"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Meta -->
</div>
I would like to "sync" this two columns with the same height doesn't matter the size of screen, can you help me?
EDIT
fiddle: https://jsfiddle.net/5nzcpj3s/
I am using Bootstrap with gentelella layout
https://jsfiddle.net/frd28kk0
I added new CSS classes just to make it easier to understand.
You have to play with the margins to get it better.
Your flexbox idea was fine. I guess you only missed setting .so-col-1 as display: flex; as well.
Boa sorte! =]
with flex-box and adding a single css class:
<div class="row flexit">...</div>
.flexit {
display:flex;
}
.flexit > div {
flex:1;
}
codepen example
Im trying to create a template like this one:
But im not sure if I have to created with css, bootstrap or both.
This is what I have
HTML:
<div class="square">
<div class="col-md-12">
<div class="col-md-2">
<img src="../Images/logo.png" class="text-left" style="width:120px;"/>
</div>
<div class="col-md-5 text-center">
<h4>Alert PLC</h4>
</div>
<div class="col-md-5 text-center">
<h4>No. Alert: 44445543</h4>
</div>
<div class="col-md-10">
<hr class="line" />
</div>
</div>
CSS
body {
background-color: #aeaeae;
}
.square {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.line {
height: 4px;
color: #000000;
border-radius: 2px;
background-color: #000000;
}
Here is JSfiddle demo
Hope it will help you.I made several changes in html.
HTML:
<body>
<div class="square">
<div class="row">
<div class="col-md-4">
<img src="https://image.freepik.com/free-vector/retro-retro-hipster-bicycle-design_23-2147491723.jpg" class="pull-left" style="width:120px;"/>
</div>
<div class="col-md-4 text-center">
<h4>Alert PLC</h4>
</div>
<hr class="line" />
<div class="col-md-4 text-center">
<h4>No. Alert: 44445543</h4>
</div>
</div>
</div>
</body>
I'm having a problem with a bootstrap based layout in Firefox.
Whats happening is that the rows are transitioning to the right when there is more than one row, but in Chrome and IE11 it doesn't do this.
Screenshot of how it looks in Firefox > http://i.imgur.com/GJEClw9.png
Screenshot of how it looks in Chrome/IE11 > http://i.imgur.com/baxNdJa.png
This is my CSS/HTML
.forumNavigation a:link, a:visited, a:hover, a:active {
color: #000;
text-decoration: none;
}
/*
Category headers
*/
.catHeader {
background-image: url(../../assets/img/bg.png);
background-repeat: repeat;
font-size: 14px;
font-weight: bold;
color: #fff;
line-height: 40px;
padding-left: 30px;
}
.catHeader a {
color: #fff;
text-decoration: none;
}
/*
Forum table borders to save space
*/
.forumTitleBlock,
.forumReplyBlock,
.forumlastPostInfo {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
vertical-align: middle;
padding-top:8px;
padding-bottom:8px;
}
.postIcon,
.forumsLeftBlock,
.forumStats {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
vertical-align: middle;
}
/*
Columns of same height styles (Part of the above Forum styles)
*/
.row-same-height {
display: table;
width: 100%;
}
.col-md-height {
display: table-cell;
float: none !important;
}
/*
Padding below each category
*/
.blank {
padding:10px;
}
/*
Forum Statistics Section
*/
.forumStats {
padding-top:7px;
padding-bottom:5px;
}
<div class="row">
<div class="col-md-6 animated" data-animation="fadeInUp" data-animation-delay="900"></div>
<div class="col-md-12 form-element animated" data-animation="fadeInUp" data-animation-delay="1200">
<div class="row">
<div class="col-md-12 forumContainer">
<div class="col-md-6 forumNavigation">Forum</div>
<div class="col-md-6 forumMessages text-right">Messages</div>
</div>
</div>
<div class="row">
<div class="col-md-12 catHeader" id="catHeader">Categories<a data-toggle="collapse" data-parent="catHeader" href="#coll-1" style="float:right"><i class="fa fa-sort" style="color:#777;"></i></a></div>
<div class="collapse in" id="coll-1">
<div class="row-same-height">
<div class="col-md-1 col-md-height forumsLeftBlock">icon</div>
<div class="col-md-7 col-md-height forumTitleBlock">Forum Title<br /> <small>test subtitle</small></div>
<div class="col-md-1 col-md-height forumReplyBlock">Topics<br />Replies</div>
<div class="col-md-3 col-md-height forumlastPostInfo">Last Post info</div>
</div>
<div class="row-same-height">
<div class="col-md-1 col-md-height forumsLeftBlock">icon</div>
<div class="col-md-7 col-md-height forumTitleBlock">Forum Title<br /> <small>test subtitle</small></div>
<div class="col-md-1 col-md-height forumReplyBlock">Topics<br />Replies</div>
<div class="col-md-3 col-md-height forumlastPostInfo">Last Post info</div>
</div>
</div>
</div>
<div class="blank"></div>
<div class="row">
<div class="col-md-12 catHeader text-center" id="statsHeader">Forum Statistics<a data-toggle="collapse" data-parent="statsHeader" href="#stats" style="float:right"><i class="fa fa-sort" style="color:#777;"></i></a></div>
<div class="collapse in" id="stats">
<div class="col-md-12 forumStats text-center">Topics: | Posts: | Members: </div>
</div>
</div>
</div>
</div>
After what Jey wrote, I rewrote the code to the following
<div class="row forumContainer">
<div class="col-md-8 forumNavigation">Forum</div>
<div class="col-md-4 forumMessages text-right">Messages</div>
</div>
<div class="row">
<div class="col-md-12 catHeader" id="catHeader">Categories
<a data-toggle="collapse" data-parent="catHeader" href="#coll-1" style="float:right"><i class="fa fa-sort" style="color:#777;"></i></a>
</div>
</div>
<div class="collapse in" id="coll-1">
<div class="row">
<div class="row-same-height">
<div class="col-md-1 col-md-height forumsLeftBlock">icon</div>
<div class="col-md-7 col-md-height forumTitleBlock">Forum Title<br /> <small>test subtitle<?php echo $forum['subtitle']; ?></small></div>
<div class="col-md-1 col-md-height forumReplyBlock">Topics<br />Replies</div>
<div class="col-md-3 col-md-height forumlastPostInfo">Last Post info</div>
</div>
</div>
<div class="row">
<div class="row-same-height">
<div class="col-md-1 col-md-height forumsLeftBlock">icon</div>
<div class="col-md-7 col-md-height forumTitleBlock">Forum Title<br /> <small>test subtitle<?php echo $forum['subtitle']; ?></small></div>
<div class="col-md-1 col-md-height forumReplyBlock">Topics<br />Replies</div>
<div class="col-md-3 col-md-height forumlastPostInfo">Last Post info</div>
</div>
</div>
</div>
<div class="blank"></div>
<div class="row">
<div class="col-md-12 catHeader text-center" id="statsHeader">Forum Statistics<a data-toggle="collapse" data-parent="statsHeader" href="#stats" style="float:right"><i class="fa fa-sort" style="color:#777;"></i></a></div>
</div>
<div class="row">
<div class="collapse in" id="stats">
<div class="col-md-12 forumStats text-center">Topics: 1234 | Posts: 5678 | Members: 1234</div>
</div>
</div>