I need to align an icon with two lines of text, I am using MaterilizeCSS. This is my code but I can not solve it.
Any ideas?
<div class="col s12 m3 center">
<i class="material-icons">access_time</i>
<span>Horario</span><br>
<span>Helper text</span>
</div>
Attached picture to explain myself better
.d-flex {
display: flex
}
.text {
flex-direction: column;
margin-left: 10px;
}
.fa-map-marker.marker {
font-size: 35px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col s12 m3 center d-flex">
<i class="fa fa-map-marker marker"></i>
<div class="d-flex text">
<span>Horario</span>
<span>Helper text</span>
</div>
</div>
Related
I use bootstrap 5
Instead of having text below icon, I would like text align verticaly with icon heigh
h3 {
text-align: center;
}
.testHead {
background-color: #5c636a;
color: white;
text-align: center;
}
.testHead .col {
font-size: 1.2rem!important;
}
.testHead i {
font-size: 4rem!important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="testHead">
<h3>For a few dollar</h3>
<br>
<div class="row">
<div class="col ">
<i class="bi bi-display"></i> Answer simple question
</div>
<div class="col">
<i class="bi bi-download"></i> Download and print
</div>
<div class="col">
<i class="bi bi-clock"></i> It take less then 10 minutes
</div>
</div>
</nav>
Search to get something like
Make your elements flex, it's the easiest solution.
Add these Bootstrap classes to your elements that need to be vertically centered like this :
<nav class="testHead">
<h3>For a few dollar</h3>
<br />
<div class="row">
<div class="col d-flex align-items-center">
<i class="bi bi-display"></i>
Answer simple question
</div>
<div class="col d-flex align-items-center">
<i class="bi bi-download"></i>
Download and print
</div>
<div class="col d-flex align-items-center">
<i class="bi bi-clock"></i>
It take less then 10 minutes
</div>
</div>
</nav>
or with simple CSS.
Surround your texts with a p tag, with a classname to give the margin-letf
Ex :
<div class="col d-flex align-items-center">
<i class="bi bi-display"></i>
<p class="descr">Answer simple question</p>
</div>
and then apply css to your <div class="col"> :
.col {
display:flex;
align-items:center;
}
.col .descr {
margin-left: 10px
}
I'm trying to find a solution how to vertically align the 2 rows in the footer which are placed with a Bootstrap grid.
I've already tried to make a wrapper for the content and apply the regular flexbox solution:
display: flex; align-items: center. But this moves both rows to be on the same row.
Fiddle here https://codepen.io/pen/WNNPdxv
HTML
<footer class="footer">
<div class="footer-wrapper">
<div class="container">
<div class="row row">
<div class="col-sm-8 footer-credit">
<h6>GetMove</h6>
<p>Copyright © 2019 GetMove All Rights Reserved</p>
</div>
<div class="col-sm-2 footer-contact">
<h6>Contact</h6>
hola#getmove.net
</div>
<div class="col-sm-2 footer-social-icons">
<h6>Follow us</h6>
<a class="social-icon" target="_blank" href="https://www.facebook.com/pg/GetMove.Official/"
><i class="fab fa-facebook-square"></i
></a>
<a class="social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"
><i class="fab fa-instagram"></i
></a>
<a class="social-icon" target="_blank" href="https://soundcloud.com/getmove"
><i class="fab fa-soundcloud"></i
></a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8 text-center"></div>
<div class="col-sm-4 footer-newsletter">
<h6>Subscribe</h6>
<div class="input-group input-group-sm mb-3">
<input
type="text"
class="form-control shadow-none"
id="subscribe"
placeholder="# Enter your email adress"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
/>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
<div class="container footer-credit">
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4 footer-credit"></div>
</div>
</div>
</div>
</footer>
CSS
.footer {
width: 100%;
height: 24em; /* Set the fixed height of the footer here */
background-color: #f4f2f0;
margin-top: 4em;
}
.footer-social-icons {
list-style-type: none;
}
.footer h6 {
text-transform: uppercase;
font-size: 16px;
}
.footer-credit {
font-size: 11px;
}
.social-icon {
/* display: block; */
margin: 0;
font-size: 16px;
}
.form-control:focus {
border-color: black;
}
The idea of a wrapper to vertically center content is correct, however you already have a wrapper in place => container.
No need to have multiple containers inside a single section (footer). You use rows for this.
So to clean-up your structure a bit, as suggested in the comments, is key to understand what's going on.
container is your wrapper
row row is redundant
empty columns as placeholder are not required with flexbox (bootstrap 4), not sure if that's what's going on... => m-auto, ml-auto, mr-auto
place custom classes inside columns (these blocks might change places someday, especially when designing for a CMS)
keep the structure clean and decorate with utility classes if needed (padding, margin, ...)
HTML Structure
<footer role="contentinfo">
<div class="container">
<div class="row">
<div class="col-sm-7"></div>
<div class="col-sm-3"></div>
<div class="col-sm-2"></div>
</div>
<div class="row">
<div class="col-sm-5 ml-auto"></div>
</div>
<div class="row">
<div class="col-sm-5 ml-auto"></div>
</div>
</div>
</footer>
Solution
Now your height is set on the footer, your container is simply taking the required height inside the space. This means you should now be able to move it vertically with flexbox.
footer[role="contentinfo"] {
display: flex;
flex-flow: column wrap;
justify-content: center; /* content of the footer is the container */
}
DEMO
I want to use a Font Awesome 5 icon as card background image using Bootstrap-4!
I tried everything what I found from the internet but nothing worked.
I'm using Angular2 (v8) along with Bootstrap 4.
The following code worked for me. I've simplified what I use but you still get a font-awesome icon as background and you can put text on top of it:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-6 d-flex">
<div class="class-box">
<div class="bg-primary">
<i class="fa fa-question big-centered-icon"></i>
</div>
<div class="box-content">
<h3 class="title-bg text-outline"><Strong>TITLE</Strong></h3>
<h4 class="title-bg text-outline">Subtitle</h4>
<h4 class="title-bg text-outline"><Strong> Subtitle</Strong></h4>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 d-flex">
<div class="class-box">
<div class="bg-primary">
<i class="fa fa-question big-centered-icon"></i>
</div>
<div class="box-content">
<h3 class="title-bg text-outline"><Strong>HELLO</Strong></h3>
<h3 class="title-bg text-outline"><Strong> 2nd HELLO</Strong></h3>
<h3 class="title-bg text-outline"><Strong> 3rd HELLO</Strong></h3>
</div>
</div>
</div>
</div>
</div>
CSS:
.big-centered-icon {
font-size: 144px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex; /* add */
justify-content: center; /* add to align horizontal */
align-items: center; /* add to align vertical */
}
.class-box{ text-align:center;position:relative;margin:8px;width: 100%;padding-bottom: 75%}
div.class-box > div { position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;padding-top:15%}
.class-box .title-bg{font-size:24px;color:#000;}
See the working fiddle.
I'm developing an app using angular2 front end. I cannot use a table given my design. Not sure how I can use panels or cards to achieve this. Please help.
EDIT:
I have tried different things but I know I cannot come close to that.
<div class="panel panel-default">
<div class="panel-heading">title [Ref: 1/07/17]</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-3">
<img class="picture-frame" src="{{picture}}" />
</div>
<div class="col-sm-4">
<p>
Description goes here.
</p>
</div>
<div class="col-sm-5">
<p>
Address goes here
</p>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-info"><span class="glyphicon glyphicon-edit"></span></button>
<button class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span></button>
</div>
</div>
Actualy everything is possible using bootstrap and CSS, with layout ofcourse.
The so called layout used inside the picture is also called material design. You also noted that you use angular. Angular has an addon called AngularJS Material.
Check out this website, as it might be usefull for you: https://material.angularjs.org/latest/
Check demo beneath. Used only bootstrap and CSS.
I created the material classes myself. As its not hard to archieve a layout like it with just CSS.
body, html {
background-color: #ededed !important;
padding: 20px 5px;
}
.flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Just like `vertical-align: middle` */
align-items: center;
justify-content: center;
}
.material-row {
background-color: #fff;
margin-bottom: 15px;
box-shadow: 0 2px 1px #ccc;
-moz-box-shadow: 0 2px 1px #ccc;
-webkit-box-shadow: 0 2px 1px #ccc;
}
.right-column {
padding: 15px;
border-left: 3px solid #ededed;
}
.left-column .fa {
color: #337ab7;
font-size: 34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row flex-container material-row">
<div class="col-sm-2 col-xs-2 left-column text-center">
<i class="fa fa-globe" aria-hidden="true"></i>
</div>
<div class="col-sm-10 col-xs-10 right-column">
<strong>Default.aspx</strong>
<p>Some long description here</p>
Show folder
</div>
</div>
<div class="row flex-container material-row">
<div class="col-sm-2 col-xs-2 left-column text-center">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="col-sm-10 col-xs-10 right-column">
<strong>Content.aspx</strong>
<p>Some long description <br/>here</p>
Show folder
</div>
</div>
</div>
Perhaps this link might be usefull aswell: https://material.io/guidelines/material-design/introduction.html
I am trying something like fontawesome and want to center the icon:
<div class="col-md-2">
<i class="fa fa-bandcamp" aria-hidden="true"></i>
</div>
without using a special class todo this with , how can I manage with css? I tried text-align , center etc?
If you can use flexbox, it can easily solved by align-items and justify-content. border is added just to show the side of the div.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-2" style="border: 1px black dotted; display: flex; align-items: center; justify-content: center; height: 50px;">
<i class="fa fa-bandcamp" aria-hidden="true"></i>
</div>
</div>
</div>