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>
Related
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 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>
I have some buttons on a row, two aligned on the left and one aligned on the right as follows:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* Vertically center the text there */
line-height: 60px;
background-color: #f5f5f5;
}
.fa-arrows-alt {
color: rgb(231, 81, 37);
cursor: pointer;
}
<script src="https://use.fontawesome.com/23ac9aaa92.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-12">
A div here
</div>
<div class="col-12 col-md-12">
<button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
<button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
<i class="fa fa-arrows-alt fa-2x float-right"></i>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
I would like the buttons to force them to be always on the bottom of the div, above the footer. I tried using bottom: 0 and position absolute, fixed but I received an unexpected result. Any suggestions are welcome.
use bootstrap 4 position-absolute predefined class and add bottom:0
.position-absolute {
bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid position-absolute">
<div class="row">
<div class="col-12 col-md-12 btn-row">
<button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
<button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
<button type="button" class="btn btn-outline-dark btn-sm float-right">Full Screen</button>
</div>
</div>
</div>
Use the flexbox classes that are built in to Bootstrap. You just need CSS to make sure the body is display:flex and full height...
https://www.codeply.com/go/lEaF85K1KU
CSS
body {
height:100vh;
display: flex;
flex-direction: column;
}
.flex-fill {
flex: 1 1 auto;
}
HTML
<main class="container-fluid d-flex flex-column flex-fill">
<div class="row flex-column flex-fill">
<div class="col-12 flex-fill">
A div here
</div>
<div class="col-12">
<button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
<button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
<i class="fa fa-arrows-alt fa-2x float-right"></i>
</div>
</div>
</main>
<footer class="container-fluid bg-light py-3">
Sticky Footer
</footer>
Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release. So after that release the extra CSS for flex-fill won't be needed.
To get something to stick to the bottom of the screen, do
<footer class="fixed-bottom">
To get buttons to go left and right give each button a class of “pull-left” or “pull-right”
I'm trying to position two paragraphs next to a Font Awesome icon and have them vertically centred too.
Using the below I have managed to get what I want but this is not responsive. If I start to shrink the screen, the text in the paragraphs becomes too long and then the div wrapping the paragraphs moves onto the next line. I would like the paragraph text to wrap whilst still being vertically centred.
For quickness I have just used the style tags for CSS.
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-quote-left fa-4x fa-border" style="display: inline-block; vertical-align:middle;"></i>
<div style="display: inline-block; vertical-align:middle; width: auto;">
<p>sdfsdfd fsdfsdfsdfsdfd fdfsdfsdfsdfsd fsdfsddfdf sdfsdfsdf sdfsdfsdsdfd fsdfsdfsdf sdfsdfsddfsdfs</p>
<p>sdfsdfdf sdfsdfsdfsdfdf dfsdfsdfsdfsdfsdf sddfdfsdfsdfsdfsdfsd fsdsdfd fsd fsd fsdf sdfs dfsddf sdfs</p>
</div>
</body>
</html>
Replace this code to your body:
<i class="fa fa-quote-left fa-4x fa-border" style="display: inline-block; vertical-align:middle;"></i>
<div style="display: inline-block; vertical-align:middle; width: calc(100% - 109px);word-wrap: break-word;">
<p>sdfsdfdfsdfsdfsdfsdfdfdfsdfsdfsdfsdfsdfsddfdfsdfsdfsdfsdfsdfsdsdfdfsdfsdfsdfsdfsdfsddfsdfs</p>
<p>sdfsdfdfsdfsdfsdfsdfdfdfsdfsdfsdfsdfsdfsddfdfsdfsdfsdfsdfsdfsdsdfdfsdfsdfsdfsdfsdfsddfsdfs</p>
</div>
Here is the preview link: https://codepen.io/ziruhel/pen/aVzoPd
I update for you avoiding fixed size..
<div style="display: table-row;">
<div style="display: table-cell;vertical-align: middle;"><i class="fa fa-quote-left fa-4x fa-border" style=" "></i></div>
<div style="display: table-cell; vertical-align:middle; word-break: break-all;">
<p>sdfsdfdfsdfsdfsdfsdfdfdfsdfsdfsdfsdfsdfsddfdfsdfsdfsdfsdfsdfsdsdfdfsdfsdfsdfsdfsdfsddfsdfs</p>
<p>sdfsdfdfsdfsdfsdfsdfdfdfsdfsdfsdfsdfsdfsddfdfsdfsdfsdfsdfsdfsdsdfdfsdfsdfsdfsdfsdfsddfsdfs</p>
</div>
</div>
here is update link :
https://codepen.io/ziruhel/pen/XzJWdK
EDIT based on comment:
Float solution Fiddle (text will wrap below icon though)
You could use flex for that, note that in your scenario you are using very long text without spacing, which will prevent the browser from correctly wrapping it, added a few spaces to text here and there.
I'd suggest re-working your HTML to the following:
<div class="wrapper">
<div class="icon">
<i class="fa fa-quote-left fa-4x fa-border" style=""></i>
</div>
<div class="text">
<p>sdfsdfdfsdfsdfsdfsdfdf dfsdfsdfsdfsdfsdf sddfdfsdfsdf sdfsdfsdfsdsdfdf sdfsdfsdfsdfsdf sddfsdfs</p>
<p>sdfsdfdfsdfsdfsdfsdfdfd fsdfsdfsdfsd fsdfsddfdfsdfsdfsdfs dfsdfsdsdfdfsdfsdf sdfsdfsdfsddfsdfs</p>
</div>
</div>
Then simply add display: flex; to .wrapper via CSS.
See working resizable snippet (once on it, re-run for proper displaying)
Screens below:
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