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>
Related
I'm trying to center an img in a div without success and I have tried many CSS hacks. I'm missing something and I have no idea what I'm doing wrong.
Markup
<div class="col-md-6">
<div class="row">
<div class="col-md-4" >
<div class="img-guarantee">
<img src='img/clock.png' class='img-responsive'>
</div>
</div>
</div>
</div>
CSS
.img-guarantee img{
display: inline-block;
margin: 0 auto;
}
First of all, using a column outside a row is not advised whatsoever. I take it that you use Bootstrap so it's only appropriate to use a column within a row.
Secondly, you can create another class by the name .text-center, add the CSS rule: text-align: center; and finally add the newly created class to the parent element which in this case is <div class="col-md-4">
This is the final result: https://jsfiddle.net/ydeeLLrd/1/ (including a fix to the first issue)
This should work:
.img-guarantee img{
margin: 0 auto;
}
.img-guarantee {
text-align: center;
}
<div class="col-md-6">
<div class="row">
<div class="col-md-4" >
<div class="img-guarantee">
<img src='img/clock.png' class='img-responsive'>
</div>
</div>
</div>
See my code at codepen
I'm trying to horizontally center the circle progress bar in the page, I tried setting margin: 0 auto; on the div, it didn't work. I, also, tried setting text-align: center on the parent div and setting the div to display: inline-block, no success as well.
This is the element in the HTML I'm trying to center:
<div class="row">
<div class="clearfix">
<div class="col-md-12">
<div class="timer"> <!-- this one should be centered -->
<div class="c100 p50 big">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
</div>
And this is the CSS I'm applying on the element:
.col-md-12{
width: 100%;
}
.timer{
width: 100%;
margin: 0 auto;
}
Remove float: left; or set it to none in .c100 css class.
.c100 {
float:none;
}
I think it should be like this.
<center>
<div class="row">
<div class="clearfix">
<div class="col-md-12">
<div class="timer"> <!-- this one should be centered -->
<div class="c100 p50 big">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
Replace your existing CSS rules with:
.col-md-12 {
text-align: center;
}
.timer {
display: inline-block;
}
<div class="timer"> <!-- this one should be centered -->
.timer{
width: 100%;
margin: 0 auto;
}
It is centered. It is also 100% wide, so being in the center is the same as being left or right aligned. It takes up all the space.
You need to set a smaller width in order for it to noticeably appear in the center.
Remove float: left;from .c100 class to center the div.
If that's what you wanted:
CodePen example
I added:
.timer {display: flex}
and also added a new class to it's only child
.align {margin: 0 auto !important;}
as .c100 overrides margins.
I am using Bootstrap 4 Alpha 5 and I have the following HTML:
<div class="home-content">
<div class="container">
<div class="row flex-items-xs-middle">
<div class="col-md-7">
<h1 class="site-title text-xs-center text-md-left">
<span class="name">I'm Shivam Paw</span>
<span class="title">I create beautiful and bespoke websites to fit your needs</span>
</h1>
</div>
<div class="col-md-5">
<img src="https://www.shivampaw.com/wp-content/uploads/2016/10/shivampaw.png" class="float-md-right img-fluid logo-me mx-auto" alt="Shivam Paw">
</div>
</div>
</div>
</div>
However, if you see the image below then you will see that the content is misaligned to the left. I saw a post on this on SO but it said you have to put the row class in a container which I have already done.
You can see the site live at https://www.shivampaw.com
I looked at the .row CSS which has margin for left and right of -15px. Removing those margins fixed it but I don't think that's how it should be?
If this is what you expect then look at your CSS. This is the line centering your content
.text-xs-center {
text-align: center!important;
}
This should fix it though
.site-title {
font-size: 36px;
color: white;
font-weight: bold;
text-align: left !important;
}
Turns out I had some offending CSS in my style.css:
*, img.full-size{
max-width: 100%;
}
Changing it to:
img.full-size{
max-width: 100%;
}
Fixed the problem.
I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins.
Crazy, huh!
I'm not sure how to explain this so I drew it!
What I've done so far is this:
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo#jsFiddle.
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
CSS only solutions if possible.
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
First of all you have to take into account Grid System Rules:
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three .col-sm-4
So following the above rules you can achieve what you want like this:
Here a working JSFiddle fork from yours
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>
You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.
I recommend making the following changes.
Start by making a .container-fluid
Then move your .container into your .container-fluid
lastly, move your header above your .container, but inside your .container-fluid
Once complete it should look something like.
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
would something like this work? http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
Use the grid system to isolate header and body:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
Use .container-fluid for the content you want to be full width instead of the fixed-width that comes with .container.
Per Bootstrap:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
If you want container-fluid to go the absolute edge of the window, you can set padding: 0; like:
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/ (I put a border around .container so you can see the div.
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}
I have a problem with responsiveness. In my example by right side there's 30 px blank place. I don't know how the hell fix it. Does somebody have any idea? http://jsfiddle.net/98p3webw/ details details details details
.imageeee {
position:absolute;
max-width: 100%;
}
.logo{
max-width: 100%;
max-height: 100%;
}
.max{
width: 100%;
position:relative;
}
.background{
position:absolute;
width: 100%;
background-image: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg");
height: 100%;
background-size: cover;
}
<body>
<div >
<div class="row">
<center>
<img class="logo" src="http://i59.tinypic.com/dcbgiw.png">
</center>
</div>
<div class="background col-md-12">
<div class="max">
<div class="col-md-2"></div>
<div class="col-md-8 thumbnail" style="top: 40px;" >
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
The 15 pixel spacing you are seeing are being added by Bootstrap's row class.
.row {
margin-left: -15px;
margin-right: -15px;
}
In Bootstrap, .row elements should be wrapped by a .container or container-fluid element.
From the Grid system section of the Boostrap docs:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
So wrapping your .row element in a .container should solve your immediate problem.
JSFiddle Example:
<div class="container">
<div class="row">
<center>
<img class="logo" src="http://i59.tinypic.com/dcbgiw.png">
</center>
</div>
</div>
Further Reading:
You might want to read over the Boostrap docs for the grid system so you can make sure you use it correctly in other places. Also, the <center> tag is deprecated, You should use the CSS test-align property instead.