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:
Related
How can I vertically align a badge (which is smaller) vertically next to the h1 tag.
I don't want to put the span tag into the h1 tag for SEO reasons.
Right now it is aligned at the bottom. I want to have it in the middle.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:350px;">
<h1 class="d-inline">This is a Test This is a Test</h1>
<span class="badge badge-secondary ml-2">My Badge</span>
</div>
Expected result:
You can make the parent flexbox and then align-items: center;
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div style="width:350px;" class="d-flex align-items-center">
<h1 class="d-inline" style="white-space: no-wrap;">This is a Test This is a Test</h1>
<span class="badge badge-secondary ml-2">My Badge</span>
</div>
Note: I've added white-space: no-wrap; to the heading to prevent it from wrapping
Otherwise, if that's cheating, you can use transform to position it 50% up from the bottom of the last row (so it also works for multiline titles)
.badge {
transform:translateY(-50%);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div style="width:350px;">
<h1 class="d-inline">This is a Test This is a Test</h1>
<span class="badge badge-secondary ml-2">My Badge</span>
</div>
However, this transformation is based on it's own height, rather than the height of the parent, so it will break when the font size is increased.
You're probably best off adding the span to the h1 element as it will give you more control; I'm sure that Google is intelligent enough to understand that pattern.
Play with vertical-align
.badge.badge-secondary {
vertical-align: 0.7em;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div style="width:350px;">
<h1 class="d-inline">This is a Test This is a Test</h1>
<span class="badge badge-secondary ml-2">My Badge</span>
</div>
I've got a tricky problem using bootstrap 4.
In the following example, I have a row with two columns.
The first one contains a very long text without any space. The second one contains a small one, specified as "col-auto".
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red; width: 500px;" class="container">
<div class="row">
<div class="col">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
<div class="col-auto">
RIGHT
</div>
</div>
</div>
</body>
</html>
But, unfortunately, my columns are rendered on two distinct lines, as shown in the example below.
Instead, I would like my text to wrap, and display something like that (without the spaces):
Do you know if this possible? If yes, which CSS property should I apply on which tag? I searched for something like forcing the width:auto attribute to be effective, but I don't know how.
Thanks a lot
Use break-word:
Since col will let bootstrap handle the grid automatically this is not achievable with col and the only thing you can do is adding break-word to col class and avoid the text to overflow the parent div.
.col {
overflow-wrap: break-word;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red; width: 500px;" class="container">
<div class="row">
<div class="col">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
<div class="col-auto">
RIGHT
</div>
</div>
</div>
</body>
</html>
Use bootstrap col-x-x:
On the other hand, you can achieve it with col-6 and add it to both child div to let the browser now there is two-column with the same height in the same row but since your text is too long you still have to add break-word to the related div to avoid further mess up. For better understanding bootstrap grid and find the better solution to fit your exact need I suggest to read get the bootstrap document from here or w3school document on bootstrap grid system from here.
Here's the snippet to let it happen:
div.row>div:first-of-type.col-6 {
overflow-wrap: break-word;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red;" class="container">
<div class="row">
<div class="col-6">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
<div class="col-6">
RIGHT
</div>
</div>
</div>
</body>
</html>
NOTE: to avoid further issues I suggest to remove width: 500px; from the parent division.
Use bootstrap's .text-break if text is a plain text.
.text-break {
word-break: break-word !important; // IE & < Edge 18
overflow-wrap: break-word !important;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red; width: 500px;" class="container">
<div class="row">
<div class="col text-break">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
<div class="col-auto">
RIGHT
</div>
</div>
</div>
</body>
</html>
If it is preformatted text, text-break does not work. And since bootstrap does not have any class that wraps long preformatted text, you need to write some custom CSS.
.pre-text-wrap {
white-space: normal !important;
word-break: break-all;
}
.pre-text-wrap {
white-space: normal !important;
word-break: break-all;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red; width: 500px;" class="container">
<div class="row">
<div class="col">
<pre class="pre-text-wrap">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</pre>
</div>
<div class="col-auto">
RIGHT
</div>
</div>
</div>
</body>
</html>
Or you may use bootstrap's .text-wrap and only word-break: break-all;.
.text-break-all {
word-break: break-all;
}
I feel like using margin and padding will mess with the bootstrap grid in a way that makes it not work on all devices since your going outside of the grid. If anyone can clarify this that would be awesome. Anyways I'm having issues getting the left arrow to space out away from the 3 bike images in a way that keeps everything on the page perfectly centered. I've been messing with the grid, but no matter what I do I can't get the left arrow to move away from the first bike image. See screenshot for reference. Any help is appreciated.
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="col-md-1" id="leftArrow"><img ng-src="images/leftarrow.png"></div>
<div class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
<div class="col-md-1" id="rightArrow"><img ng-src="images/rightarrow.png"></div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
CSS
.header{
font-style:italic;
background-color:black;
height:60px;
color:white;
font-weight:bold;
font-size:40px;
}
.header .fa {font-style:italic;
}
.bikeSelector{
color:green;
}
.chooseTitle{
font-size:60px;
}
.products{
color: #1E90FF ;
text-align:center;
font-size:40px;
}
#bikePic{
height:100%;
width:100%;
}
<img ng-src="images/leftarrow.png">
change to
<img ng-src="images/leftarrow.png" class="img-responsive">
this will add max-width: 100%; to your image and won't break the <div class="col-md-1" id="leftArrow"> layout
In other words, your problem is that nav images is too big :)
I would rather use absolute positioning for the navigation elements.
Like
#leftArrow{
position: absolute;
left: -40px;
top: 50%;
}
I'm trying to get full width container with jumbotron or something like this in full width:
<div class="container" style="margin: 0 auto;width: 100%;background-color: red">
<div class="jumbotron">
<h1>Full Width Layout</h1>
<p class="lead">The Bootstrap 3 grid is fluid only. This example shows how to use a custom container to create a fixed width layout.</p>
<p><a class="btn btn-large btn-success" href="http://bootply.com/tagged/bootstrap-3" target="ext">More
Examples</a>
</p>
</div>
</div>
currently i'm using : https://github.com/FezVrasta/bootstrap-material-design with Yii2.
I've tryied everything about this, but still the problem exist and it's not full width.
If you want full width
you don't have to use container in your page and remember to remove this class also from the layout you are using. (or you can define a layout without this class and set in your action $this->layout= "yourNewLayout"; before render the page) typically the default layout is located in /view/layouts/main.php
then you must remove this line:
class="container"
then you can see a full with yii2 web app.
and just a minor
you shuold use:
style="margin: 0 auto;width: 100%; background-color: red;">
To make the jumbotron full width, and without rounded corners, place
it outside all .containers and instead add a .container within.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
See Docs
And since you're using Bootstrap-Material, you can use the built in classes to add color (this is dependent on the material-fullpalette.css, not material.css, See Docs)
See Working Example Snippets.
$.material.init()
/*ADD YOURSELF*/
.jumbotron.jumbo-red {
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.4.4/css/material-fullpalette.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.4.4/js/ripples.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.4.4/js/material.min.js"></script>
<div class="well">Your Own CSS for Color</div>
<div class="jumbotron jumbo-red">
<div class="container">
<h1>Full Width Layout</h1>
<p class="lead">The Bootstrap 3 grid is fluid only. This example shows how to use a custom container to create a fixed width layout.</p>
<p><a class="btn btn-large btn-success" href="#" target="ext">More
Examples</a>
</p>
</div>
</div>
<hr>
<div class="well">Material CSS for Color</div>
<div class="jumbotron jumbotron-material-red-A700">
<div class="container">
<h1>Full Width Layout</h1>
<p class="lead">The Bootstrap 3 grid is fluid only. This example shows how to use a custom container to create a fixed width layout.</p>
<p><a class="btn btn-large btn-material-green" href="#" target="ext">More
Examples</a>
</p>
</div>
</div>
I'm trying to create a simple HTML document that has two main divs - the first one has a background image w/a background size of cover so that the image takes up the entire top portion of the screen, the second div is directly beneath the first div and contains an img tag.
This seems simple enough, but when I apply a background:url style to my first div, scrolling down causes my second div image to overlap the background image of the first div. I expected this so I set a height property in my first div and this has no effect.
How do I make the first image cover the first div but not have the second one overlap it?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="font-family: 'lato'; font-size:18px;">
<div class="container-fluid">
<div style="background:url('http://www.screensavergift.com/wp-content/uploads/2011/01/BeautifulLakeView1.jpg') no-repeat center center fixed; background-size:cover; height:1100px" class="row">
<div class="row">
<div style="margin-top:20px" class="text-right col-xs-offset-1 col-xs-10">
Login | Sign Up
</div>
</div>
<div class="row">
<div style="background-color:rgba(62,83,78,0.2); margin-top:10px" class="text-center col-xs-offset-1 col-xs-10">
<span style="color:white; font-size:40px;">
Join us in God's country!
</span>
</div>
</div>
</div>
<div class="row">
<div class="text-center">
<img src="http://www.ynaija.com/wp-content/uploads/2014/05/Bird.jpg" alt="Cyrillic alphabet" />
</div>
</div>
</div>
</body>
</html>
See an example of what I'm trying to do here:
http://jsfiddle.net/y0oL6k4d/