I'm very new to programming and I've been trying to figure this out for a while now but I'm still having trouble. I'm trying too center two different pieces of text so that they are equal distances from the left and right side and from the top and bottom of the page.
Here's my code:
<div class="entrance">
<div class="container">
<div class="row">
<div class="col-md-6">
<li> Example1 </li>
</div>
<div class="col-md-6">
<li><a href="#" style="text-decoration:none" > Example2 </a></li>
</div>
</div>
</div>
</div>
I just can't seem to figure out what I'm missing and I'm sure it's probably something very simple that I'm just not getting. Any help is appreciated, thanks!
You can use css text-align to achieve what you want. text-aligh: right on the left hand <div> and text-align: left on the right hand <div>.
As #Manish mentioned, I also removed the <li> wrapper. I also added col-xs-6 to the <div>'s so it works on smaller views too.
Example: http://jsfiddle.net/11cLvc2c/3/
In case you just want to center the text, try this:
Add "text-center" next to each "col-md-6" classes:
<div class="entrance">
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<li> Example1 </li>
</div>
<div class="col-md-6 text-center">
<li><a href="#" style="text-decoration:none" > Example2 </a></li>
</div>
</div>
</div>
</div>
In case you'd like to make full centering, I'd recommend to step a little outside from bootstrap and use flexboxes. Flexboxes are new to CSS3 and solve most of our problems. See here for more info:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here's your modified code:
<style type="text/css">
.entrance{
display: flex;
justify-content:center;
align-items: center;
width: 800px; /*Put your desired width*/
height: 400px; /*Put your desired height */
}
.container div
{
width: 50%;
text-align: center;
}
</style>
<div class="entrance">
<div class="item-1">
Item 1
</div>
<div class="item-2">
Item 2
</div>
Related
I would like to align some icons and some text in a nice grid like fashion.
The text needs to be centerd under the second icon.
It would have to look like this.
____ ____ ____
| | | | | |
|ICON| |ICON| |ICON|
|____| |____| |____|
TEXT
Is there any easy way to achieve this?
create a row div and give it 100% width and float left and inside this div create 3 div as a col div and give each 33% and float left and place your icon inside these div..now create another row width 100% float left now place p tag inside it and style this p tag text-align:center now you will see your text always below 2nd icon img....
<div style="width:100%;float:left;">
<div style="width:33%;float:left;">
<img src="your source" />
</div>
<div style="width:33%;float:left;">
<img src="your source" />
</div>
<div style="width:33%;float:left;">
<img src="your source" />
</div>
</div>
<div style="width:100%;float:left;">
<p style="text-align:center;"> You Text Here..</p>
</div>
Create a class that controls the size of each of the areas that hold your icons. As a sample i just used px but if you want it responsive then i would suggest that you use %. With a holder for each icon you can easily add text below, this will then stay nicely aligned.
Sample code snippet:
.pull-left {
float: left;
}
.icon-box {
width: 100px;
text-align: center;
}
.icon {
width: 60px;
height: 60px;
border: 1px solid;
margin: 0 auto;
display: block;
}
<div class="icon-box pull-left">
<div class="icon">ICON</div>
</div>
<div class="icon-box pull-left">
<div class="icon">ICON</div>
<p>Text</p>
</div>
<div class="icon-box pull-left">
<div class="icon">ICON</div>
</div>
you can do it quite easily. You need to use list item & display inline with text center property. Like below code -
HTML portion
<div id="test1">
<ul>
<li>
<img src="" alt="num1">
</li>
<li>
<img src="" alt="num2">
<br/>
121
</li>
<li><img src="" alt="num3"></li>
</ul>
</div>
CSS for it
#test1 ul li {
display: inline;
list-style: none;
float: left;
padding: 0;
text-align:center;
}
Have you heard from bootstrap 3 ? It has a lot of features that help you with responsive alignment.
An example of this would be :
<div class="row">
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
</div>
One way I could think of is to create 3 container (for example 3 divs) with a css property on width (let say 33% width each, or something smaller if you need to add margin (you could even use px not %, but I recommand % for responsivness) with a float left property. Those divs will contain the icons, then you create another 3 icons with the same propreties that will display under the icons. Now you just have to put the text in the center one with text align center and that's it. You gave us few informations so I can't help you better than this.
Here you have an example of what I meant, you just need to implement it by your needs.
html:
<div class="container">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="text_empty"></div>
<div class="text"></div>
<div class="text_empty"></div>
css:
.container {width: 100%;}
.icon {width:33%; float: left; }
.text_empty {width:33%; float: left; }
.text {width:33%; float: left; text-align:center; }
Hy. I work with 960gs (12 columns) and I try to put the title after the logo in the bottom part of it. The solution I find doesn't work too good because it place the title under logo.
HTML:
<div id="header" >
<div class="container_12">
<header>
<div class="grid_4">
<a href="index.html" title="Pagina principala - CRCE" rel="home">
<img src="images/CRCE_logo.png" alt="logo CRCE"/>
</a>
</div>
<div id="titlePosition"class="grid_10">
<a href="index.html" title="" rel="home">
<img src="images/titlu_crce.png" alt=""/>
</a>
</div>
</header>
</div>
</div>
CSS:
#header{
background: #798AF7;
background-repeat: repeat-x;
height: 205px;
overflow: visible;
border-bottom: 30px solid #37459D;
display: block;
}
#titlePosition{
position: bottom;
}
The logo is on 4 columns and the title on 10 columns. Also I will put the language chooser(selector) and FB logo in the right top so I think that's a challenge. I've attached an image for details too, see how I want to look at the final header
I don't think you can use the columns in that fashion, it should sum to 12.
Because the logo from first Column overlaps on the second. Make your logo column as just 2 cols and have your title as 10 cols.
<div class="grid-container">
<div class="grid-2 logo-wrapper">
<img class="logo" src="logo.jpg">
</div>
<div class="grid-10">
<!-- Look how the grids can be nested further-->
<div class="grid-container">
<div class="grid-10 text-right"> Language selector</div>
<div class="grid-10 text-right"> Facebook </div>
<!-- You can use top margin -->
<div class="top30px grid-12"> Title</div>
</div>
</div>
</div>
Now set the logo image to absolute position
.logo
{
position:absolute;
left:0;
right:0;
}
Then for the parent around the .logo set it to relative.
.logo-wrapper
{
position:relative;
}
I have given my solution considering pseudo grid system, because i haven't used 960gs - grid system.
General Idea:
You can consider that following 3 element are in different rows occupying 10 columns
language selector
Facebook icon and
Site Title
Tips:
Avoid absolute position for Title as you can achieve it through
nested grids as shown in the above HTML
Use top margin to push the
title further below to the required position.
I'm having an issue with centering within a Bootstrap column. I had a placeholder page using images (a white box with an image and text inside), that I needed to change to a square white div with the image added inside and the text manually added.
When I implemented it the 2nd way, all of a sudden my columns lost there centering.
Here are the codepens for the centered one and the uncentered one.
Uncentered relevant HTML:
<div class="col-xs-4 column-centered">
<a href="../faq/category_3.html">
<div class="img-with-text">
<img src="img/Blue/VideoCollaboration-Blue.png"></img>
<p><b>Video Collaboration</b></p>
</div></a>
</div>
Centered relevant HTML:
<div class="col-xs-4 column-centered">
<div class="img-with-text">
<img src="img/temp_image.png" alt="VideoCollaboration" />
</div></div>
I'd really like to avoid using offsets as that isn't really centering..
try
.img-with-text{
display: inline-block;
}
or
.img-with-text{
margin: 0 auto;
}
That's because anchor tags are inline-block by nature, you will have to change it to block and do the following.
<div class="col-xs-4 column-centered">
<a href="../faq/category_3.html" class="block text-center">
<div class="img-with-text inline-block">
<img src="img/Blue/VideoCollaboration-Blue.png"></img>
<p><b>Video Collaboration</b></p>
</div>
</a>
</div>
.inline-block{
display: inline-block;
}
.block{
display: block;
}
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'm building a website using Bootstrap and I'm now trying to make something like this:
===========================================================
| #################### |
| #################### Big Title |
| ##THIS IS AN IMAGE## |
| #################### |
| #################### Read more |
===========================================================
The problem is that I can't align the ReadMore button to the bottom. I tried using the tips in this SO answer, but to no avail. I created a fiddle of my code here and I'll paste my code below.
Does anybody know what I'm doing wrong here? All tips are welcome!
My HTML looks like this:
<div class="container">
<div class="row">
<div class="col-sm-8">
<a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img class="img-responsive" src="image.png">
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</div>
</article>
</a>
</div>
<div class="col-sm-4"><div class="row"></div></div>
</div>
</div>
and my css:
#media (min-width: 768px ) {
.row {
position: relative;
}
#read-more {
position: absolute;
bottom: 0;
right: 0;
}
}
Try this:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
#media (min-width: 768px) {
.row {
position: relative;
}
#read-more {
position: absolute;
bottom: 0;
right: 0;
}
.col-sm-7 {
position: absolute;
width: 100%;
height: 100%;
}
}
<div class="container">
<div class="row">
<div class="col-sm-12"> <a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</div>
</article>
</a>
</div>
</div>
</div>
Here's a fiddle
Is it what you were looking for?
Sometimes you have to work against bootstrap's floats to get what you're looking for, basically by not using them (pulls, etc). I've updated your fiddle, and I believe it's close to what you were asking. Another issue was your #media was throwing things off due to the size of the result window.
Updated Fiddle
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.rel {
position: relative;
height:300px;
width: 600px;
}
.read-more {
position: absolute;
bottom: 0;
right: 0;
}
.background {
background-image: url("http://placehold.it/600x300");
height: 300px;
width: 600px;
}
}
<div class="container rel"> <a href="/thelink">
<article class="property-ad">
<div class="background img-responsive">
<div class="title">Big Title</div>
</div>
</article>
<button class="btn btn-default read-more">Read more</button>
</a>
</div>
This is due to the right panel only being the height of the content, in this case the title and the button.
To counter this, you need to set a height.
I added the class box-height to the html and, as the image seems to max at 141px [At least for me, W7 PC], I set the container height to that height (141px)
You can see a working example here; http://jsfiddle.net/8pLjfq5u/18/
Without the height being given, the button will just fix itself to the height of the container, which in this case is set by the title height etc.
Edit
I would advise against setting css changes in bootstrap classes in this instance.
At some point, that change to the core CSS will bite you in the behind, when you need it to work as intended in the original build.
Second Edit
It would appear that if you simply move the button into a col-sm-12 div, that you can get the desired result.
This also scales into mobile view too, without the need to add additional classes or css attributes.
http://jsfiddle.net/8pLjfq5u/20/
There are two possible problems here - depending on what exaclty you want to achieve!
(I guess it's the second one you are looking for!)
First:
if you want to position your read more at the bottom right corner of the whole page:
You have position:relative in your CSS for .row.
This means all elements inside an element with class row will be positioned relative to this element - so your read more can only be positioned inside it with your CSS (with negative values for right and bottom it can be outside, but still relative to this element).
Second:
If you want to position your read more at the the bottom right corner of the article
The parent element to your #read-more has only height of 20px, because the text Big Title in the div above is only of that height.
As your #read-more element is positioned absolute, it doesn't contribute to the height.
I tried setting height: 100%; on the parent element of #read-more, but it doesn't work.
So, it seems, you will have to put your #read-more elemnt outside of its parent div, directly into the article, like this:
<div class="container">
<div class="row">
<div class="col-sm-12">
<a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</article>
</a>
</div>
</div>
I added "col-xs" classes to your markup and it generated the desired display based on what you showed in your question
<div class="col-sm-5 col-xs-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7 col-xs-7">
<div class="title">Big Title</div>
If you plug that into your fiddle it displays the way you want with your media query. When you really shrink it down though it get's pretty illegible at that point.
Maybe you want to adjust the media query to display differently for "sm" and "xs".
Try this:
<div class="d-flex justify-content-end">
<button class="btn" type="submit">Connect</button>
</div>