I have a logo that I want place it in right of my container in first row. First I wrote this code:
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="../Images/logo.png" alt="Logo"/>
</div>
<div class="col-md-9">
</div>
</div>
</div>
and the logo IS shown in left side of first row with some margins. Now I add pull-right class to my div like this:
<div class="col-md-3 pull-right">
<img src="../Images/logo.png" alt="Logo"/>
</div>
and the logo aligns to right side of the browser window without any margins. How I place logo on right side of first row like left side?
Thanks
If you want to pull the image to the right you need to pull the image, not the row:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<img src="../Images/logo.png" alt="Logo" class="pull-right"/>
</div>
<div class="col-xs-6">
Column 2
</div>
</div>
</div>
If you want to the columns to switch places without changing the order of the <div>s you should use .col-*-pull-* and .col-*-push-*. They will respect the column gutters:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-push-6">
<img src="../Images/logo.png" alt="Logo"/>
</div>
<div class="col-xs-6 col-xs-pull-6">
Column 2
</div>
</div>
</div>
You can of course combine the two as well.
(By the way, don't set the alt-text to "Logo" in your final design, set it to something useful, like the company name).
Related
This is my HTML code :
<div class="container">
<div class="row">
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/300x600">
</div>
</div>
<div class="row">
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
</div>
</div>
This is the output :
https://jsfiddle.net/bnxxkLzv/
After the right banner that has height of 600 pixels , second row is starting. What i want to achieve is to make second row start below the first on the left to 300x600 banner , by lets say some fixed margin of 15px . How can this be achieved?
Here is an idea how to stack 2 rows side by side
Design the page as columns and it will be easy to stack it side by side just like nested columns
Look at this DEMO
To add margin you can declare a class wherever you deem fit and give property value
In the code below for Bootstrap 3, I am attempting to get the 3rd column to not stack. I want it to always stay top right just as the left most column stays top left. Is there a simple way? I thought about just excluding that section from bootstrap and just apply css to float right, but surely in Bootstrap, I can do this.
<header id="t3-header" class="container t3-header">
<div class="row">
<!-- LOGO -->
<div class="col-xs-12 col-md-2 logo"> I stay always top left</div>
<div class="col-xs-12 col-md-8"> I should stackunder 1st column as browser resizes </div>
<!-- I want this column to not stack below column 2 as the browser resizes. -->
<div class="col-xs-12 col-md-2">
I should always stay top right
<div class="row">
<div class="col-lg-6"> </div>
<div class="col-lg-6"> </div>
</div>
</div>
</div>
If I've understood you correctly, you've got to make the "top right" div, appear first in the cascade. To do this, first it as the first column, then you can use pull-left and pull-right helper classes to trick the first two columns:
Secondly, you could remove the col-xs-12 alike in the example:
<header id="t3-header" class="container t3-header">
<div class="row">
<div class="col-md-2 pull-right">
I should always stay top right
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
</div>
<!-- LOGO -->
<div class="col-sm-12 col-md-2 logo pull-left">
I stay always top left
</div>
<div class="col-sm-12 col-md-8 pull-left">
I should stackunder 1st column as browser resizes
</div>
</div>
</div>
Example: http://www.bootply.com/ee3E67pujY
I'm trying to bulid grids like the photo below
IMG LINK: http://postimg.org/image/qo3b4nof1/
But i'm getting the DIV E in almost next to the D-DIV
here's my code
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="col-md-1">A</div><br/>
<div class="col-md-1">B</div><br/>
<div class="col-md-1">C</div>
</div>
<div class="col-md-11">D<br/>
<div class="col-md-1">E</div>
</div>
</div>
</div>
The break-lines i added because DIV-A and DIV-B become one piece without breaklines.
is it better to do it with table ?
You do not need to use container and row with bootstrap 3.*
I changed you code to match the provided screenshot, see this http://jsfiddle.net/Sd2zw/ .
I just use xs columns because the small screen of jsfiddle, you can replace it back by md :
<div>
<div class="col-xs-1">
<div class="col-xs-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<span class="clearfix"></span>
</div>
<div class="col-xs-11">
<div class="col-xs-12 d-container">D</div>
<div class="col-xs-12">
<div class="col-xs-1">E</div>
<span class="clearfix"></span>
</div>
</div>
<span class="clearfix"></span>
</div>
Also, use some clearfix tags to clear the float.
I'm trying to layout a page element using bootstrap 3 as it's base. I've been ok with most of the layout but I'm having trouble with a particular layout I'm trying to create.
Using the standard container > row > column approach the first row only contains an image, the second row a nav type panel which is meant to sit beneath the image. Instead it's appearing at the top.
Looking at it with chrome the first row appears to have no height, despite the image.
There's something I'm missing or don't understand here.
Update
The image in the main container is absolutely positioned with -50% top to handle an oversized image. The main container is set to relative.
Here's an image of what I'm trying to create (90% there)
I've created a jsfiddle here: http://jsfiddle.net/longestdrive/vt24K/
the html is below:
<div id="hole-stats-modal">
<div class="container" >
<div class="row">
<div class="col-sm-12">
<!-- image -->
<img src="http://downssiteassets.s3.amazonaws.com/content/articles/th_downs%20golf%20503.JPG" class="img-responsive course-image" />
</div>
</div>
<!-- hole stat panel -->
<div id="hole-stats-panel" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- side stats -->
<h3>Hole Detail</h3>
<p>Content for this panel</p>
</div>
</div>
</div>
</div>
<!-- hole text info -->
<div id="course-guide" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-1">
<h3 id="hole-n-2" >3</h3>
</div>
<div id="hole-description" class="col-sm-8 ">
<p>Some text here</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="hole-navigation">
<div class="container">
<div class="row">
<ul class="unstyled list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The hole stat panel and hole info panel correctly appear where I expect them to but the nav panel does not
Any help appreciated
I think you had way more containers and rows than are needed. I recreated what you are looking for using a lot less elements.
you really only need two rows, one for the image and one for the bottom nav.
jsFiddle Demo
<div id="hole-stats-modal">
<div class="container">
<div class="row">
<div class="col-sm-12"> <!--optional-->
<div class="image"> <!-- Relative Pos with image as background -->
<div class="right-overlap transparent-back">...</div><!-- Absolute Pos to right-->
<div class="bottom-overlap transparent-back">...</div><!-- Absolute Pos ro bottom-->
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12"><!--optional-->
<div class="hole-navigation">
</ul></ul> <!--Nav-->
</div>
</div>
</div>
</div>
</div>
Problem:
Trying to create a layout using Bootstrap 3 that consist of two columns on the left of the page and one main column to the right of the two columns. The two columns on the left should be on top of each other.
Code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 1</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 2</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Main column</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 280px;"></div>
</div>
</div>
</div>
</div>
</div>
Output:
Current code produce two columns next to each other on top the main column.
Desired output:
You should use a div with class .col-sm-4 and .col-sm-8 respectively as the parent div for the two column layout you want to use and then create the desired widgets within those divs.
Check out my JSFiddle: http://jsfiddle.net/nJtX9/9/
Please make sure to enlarge the results window to see the correct layout. Otherwise it will stack the div containers for responsive purposes.
You are using 2 col-md-4 meaning is taking 8 columns already + using col-md-8 = 16 columns, bear in mind bootstrap can contain 12 columns per row,
so the way to go around this is use col-md-2 instead of col-md-4
Hope i make this clear.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:gray">
<div class="row" style="background-color:aliceblue">
<h1>col1----row1</h1>
</div>
<div class="row">
<h1>col1----row2</h1>
</div>
</div>
<div class="col-sm-6" style="background-color: aqua">
<h1>col2-----row<br />col2---row<br />col2---row</h1>
</div>
</div>
</div>