My h1 only aligns to the center of the screen if it has enough text underneath it. Otherwise, it will align wrong/not at all. How do I fix this?
.content {
margin-top: 60px;
text-align: center;
}
body {
background-color: #a8a8a8;
}
.textbox {
background-color: white;
padding: 20px 100px 100px 100px;
}
<div class="container textbox">
<div class="row">
<div class="col-xs-12 content">
<h1>Contact</h1>
</div>
</div>
</div>
Here are my screenshots of what happens in each situation I mentioned:
No text underneath the h1
A bit of text underneath the h1
Enough text underneath the h1 (the h1 finally aligns properly)
There's absolutely no need for any custom css for simple things of this nature in Bootstrap 4. The text-center class is what you want for your h1.
Also, the col-xs-* class doesn't exist in Bootstrap 4 anymore. It's just col-* now.
Here's a working example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<h1 class="text-center">Contact</h1>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</div>
</div>
Related
To illustrate the problem better, here's the video and jsfiddle.
<div class="container-fluid">
<div class="container">
<img src="https://image.com"/>
<h1>lorem ipsum dolor</h1>
</div>
While window has certain width, one part of text goes under the image and another stays next to it. How can i prevent text from dividing, so when window reaches this certain width, the whole phrase "lorem ipsum dolor" appears under the image and not just "dolor"? I'm using bootstrap, is there any special <div> class dedicated to this thing? putting text in container or content doesn't solve the problem.
I hope this is helpful.
body {
background-image: linear-gradient(to bottom right,#09845A, #8733DD);
}
.flex {
display:flex;
justify-content:center;
}
#media screen and (max-width:728px) {
.flex {
flex-direction:column;
align-items:center;
}
.img {
background:url("https://www.google.pl/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
width:100px;
}
}
.img {
background:url("https://www.google.pl/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
height:92px;
width:272px;
}
.container-fluid {
background: rgba(0,0,0,0.75);
}
.container {
display:block;
overflow:auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="flex">
<div class="img"></div>
<h1>
Ulecz się rozmową
</h1>
</div>
</div>
</body>
This should help.
https://www.w3schools.com/code/tryit.asp?filename=FY3DOVSFM4MZ
basically you need to give col-sm-12 this tells that at smalls screens make this item full width.
Why don't you try using columns instead like this.
<div class="container-fluid">
<div class="container">
<div class="col-md-6 col-sm-12 col-xs-12">
<img src="https://image.com"/>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<h1>lorem ipsum dolor</h1>
</div>
</div>
I have the following four inner div container (small picture - text - small picture - text):
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</div>
The CSS for components-circle and inner-component:
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
height: 115px;
width: 115px;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(http://...) no-repeat;
background-position: 20px 15px;
}
The problem is, that components-circle and inner-component are overlapping the text which is on the right side of them when I resize the browser, that means the template is not responsive.
How could I insert a line break when the browser is resized or make components-circle and inner-component responsive, so that they do not overlap the corrsponding text on the right side?
Is the content of the "col-sm-12" div overlapping the content of the page, or the text next to the image that is overlapping?
Anyway, you can fix both of these issues in this way, using a "container" or "row" div and adding a css for page resizing.
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
height: 115px;
width: 115px;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(http://...) no-repeat;
background-position: 20px 15px;
}
.center-text{
text-align: left;
}
#media (max-width: 765px) {
.center-text{
text-align: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4 center-text">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4 center-text">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</div>
You are already using row class so just setting the width of components-circle to 100% (rather than making it static) will work (as bootstrap will handle rest of the responsive stuff).
To keep the aspect ratio of height-width you have to remove height from components-circle and use padding-top. Have a look here to see how it works. (padding-top: 100% gives 1:1 aspect ratio)
Open the below snippet in full-page view and resize to see the effect :)
Though there can be other methods to achieve the same, IMO this one is quite simple and understandable.
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
padding-top: 100%;
width: 100%;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(https://i.ebayimg.com/images/g/eiMAAOSwH3haAlKl/s-l300.png) no-repeat;
background-size: contain;
}
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</body>
</html>
Update: To keep the inner image at the centre during resize, you have to set it's position to 0px 0px (which is default) and add background-size: contain to the inner-component. This will scale the image to fit the parent. See the updated snippet above!
To make a breakpoint that is hidden on larger viewports, you can use these CSS classes with the line break:
.d-md-none To make it invisible on anything larger than md sized screens.
.d-sm-none To hide it on anything larger than sm sized screens.
You may also need to put the row inside a container.
This is what it would look like: <br class="d-md-none">
If you want a line break without using a <br> element, check out this guide.
I am using Bulma for my project.
Basically, I am trying to put text and image(height: 25em) inline using Bulma. But it's not happening.
Up until now, I tried this:
.img-cont {
width: 50%;
float: left;
}
img {
height: 25em;
}
.clearfix {
clear: left;
}
.content {
float: right;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" type="text/css" rel="stylesheet">
<div class="container is-info">
<div class="img-cont">
<img src="https://i.imgur.com/Pyp4DwX.png" alt="">
</div>
<div class="clearfix"></div>
<div class="content has-text-centered">
<span class="title">MEDAL</span><br>
<span class="subtitle">Loren Ipsum Dolar Sit Amet.</span>
</div>
</div>
And as you can see the text content doesn't get vertically centered and always stays at the bottom.
So, how can I fix this and achieve the look I want?
Bulma is a Flexbox-based layout, so use the tools it provides you.
I've updated your snippet to include Bulma's columns. If you want them to stack on top of each other in a narrower viewport, remove the is-mobile class (see more here).
img {
height: 25em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" type="text/css" rel="stylesheet">
<div class="columns is-mobile is-centered is-vcentered">
<div class="column">
<img src="https://i.imgur.com/Pyp4DwX.png" alt="">
</div>
<div class="column">
<span class="title">MEDAL</span><br>
<span class="subtitle">Loren Ipsum Dolar Sit Amet.</span>
</div>
</div>
I have been trying for awhile now to center a div and kept it from overflowing on higher resolutions(1920 x 1200 and up), I tried adding width:auto or using positioning but nothing is working so I was hoping that someone could point me in the right direction.
This is my div:
And this is what happens on higher resolutions:
This div is within another one so here it is both the css and html for both:
/*Parent*/
.main-graphic-container {
border-radius: 5px;
padding-right: 75px;
padding-left: 75px;
padding-bottom: 35px;
margin-top: 20px;
margin-bottom: 20px;
background-color: #ebebeb;
}
/*Child*/
.feature-container {
height: 80px;
position: absolute;
z-index: 1;
margin-top:80px;
margin-left:45px;
padding-top: 10px;
border-style: solid;
border-width: 1px;
border-color: #888888;
background-color: #ffffff;
}
<div class="container main-graphic-container">
<div class="row">
...
</div>
<!-- end row -->
<!-- Child container so troublesome-->
<div class="container ">
<div class="row">
<div class="center-block">
<h1 class="greyText col-md-8 col-md-offset-2">LOREM IPSUM DOLOR SIT AMET. </h1>
<!-- Title -->
<!-- Info container -->
<div class="col-md-8 col-md-offset-1 feature-container">
<!-- Left -->
<div class="col-md-6">
<h4 class="bold blue-title text-center">Lorem ipsum</h4>
</div>
<!-- Right -->
<div class="col-md-6">
<h4 class="grey-title">Lorem ipsum</h4>
</div>
</div>
</div>
</div>
</div>
Any feedback would be greatly appreciated.
A working fiddle would be helpful in this case to see exactly what is going on.
However, some things that jump out at me:
Assuming this is bootstrap CSS, you should never need nested .container elements. If I'm not mistaken, .container gives you a fixed width which takes up most of the screen, so you shouldn't have two of them like this.
Why is .feature-container absolute position? It doesn't use top, bottom, left, or right... How is it trying to be positioned? Is it just trying to be displayed outside its parent? Just use negative margins, and overflow: visible if it is getting clipped.
You need little improvement in your code.
Try the below code for your issue.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<style type="text/css">
/*Parent*/
.head{
background-color: #eee;
padding: 3rem;
text-align: center;
}
.sub-contain{
border:1px solid #000;
padding: 2rem;
background-color: #fff;
top: -45;
text-align: center;
}
</style>
<body>
<div class="container">
<div class="head">
<h1>LOREM IPSUM DOLOR SIT AMET. </h1>
</div> <!--head-->
<div class="col-md-8 col-md-offset-2 sub-contain">
<div class="col-md-6">
<h4 class="bold blue-title text-center">Lorem ipsum</h4>
</div>
<div class="col-md-6">
<h4 class="grey-title">Lorem ipsum</h4>
</div>
</div>
</div><!--cont-->
</body>
</html>
Here I'm using bootstrap. The idea is to center the h1 element inside the div, but I haven't as of now. It's always aligned to the left. I tried using the bootstrap's center-block helper class, and the float: none, margin: 0 auto approach, but it doesn't work.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="row">
...
<div class="col-md-8">
<div id="some-div" class="row">
<p>Some text</p>
</div>
</div>
...
</div>
</div>
</nav>
Is there something I'm missing here? Like, is there a bootstrap specific way (e.g., some other helper class) of doing this? Or is it simply not possible?
You probably don't need a nested row, and Bootstrap provides text alignment classes for you. A heading is a block-level element, but you can apply the text class to it or a parent element.
<div class="col-md-8">
<div id="some-div">
<h1 class="text-center">An H1 Heading</h1>
</div>
</div>
Demo
div{
width: 200px;
height: 200px;
line-height: 200px;
background: #ccc;
text-align: center;
}
h1{
font-size: 15px;
}
<div>
<h1>Text H1</h1>
</div>