I am trying to build online web app using foundation and I have issue about centering 2 large-6 columns sharing 1 row. I have strange GAP between my 2 element containers (the gap is marked in RED). How can I put those elements close each other without having this gap or do you have why I have this gap ? I am not sure but I think the last column from foundation is floated to the right and thats why those 2 elements have this gap. Any clue on this ?
PIC example
<div class="mainHeader">
<div class="wrapper">
<div class="row">
<div class="large-6 columns one">
<div class="leftSide">
<img src="img/sun.png" width="142" height="142" title="someText" alt="someText">
</div><!-- end leftSide -->
</div>
<div class="large-6 columns one">
<div class="rightSide">
</div>
</div>
</div><!-- end row -->
</div><!-- end wrapper -->
</div><!-- main header -->
<div class="small-12 large-6 columns text-center">
You can use text-left and text-right like this:
<div class="mainHeader">
<div class="wrapper">
<div class="row">
<div class="large-6 columns text-left">
<img src="img/sun.png" width="142" height="142" title="someText" alt="someText">
</div>
<div class="large-6 columns text-right">
<img src="img/sun.png" width="142" height="142" title="someText" alt="someText">
</div>
</div>
</div>
</div>
Related
I am trying to make a row of having 5 divs in a column width of 4 in bootstrep.
So the code be -
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<!-- Main Content -->
<!-- Weather -->
<div class="element">
<div class="header_text">
Weather
</div>
<div class="element_body description_text">
<div class="row">
<div class="col-md-2">sss</div>
<div class="col-md-2">sss</div>
<div class="col-md-2">sss</div>
<div class="col-md-2">sss</div>
<div class="col-md-2">sss</div>
</div>
</div>
</div>
<!-- End Weather -->
<!-- End Main Content -->
</div>
</div>
</div>
So I get a output like-
But problem is done when I change the width of the page. It becomes vertical ins ted of remaining horizontal, like it-
But I don't want it to be changed orientation in any time. So, I want it to be horizontal every time what if the width of the page is changed or not.
Can anyone please help me?
Thanks in advance for helping.
JSFIddle.
Problem:
You are not giving the sm and xs size for it take the default behavior of div i.e. display: block;.
Solution:
So change md to xs.
<!-- Content -->
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<!-- Main Content -->
<!-- Weather -->
<div class="element">
<div class="header_text">
Weather
</div>
<div class="element_body description_text">
<div class="row">
<div class="col-xs-2">sss</div>
<div class="col-xs-2">sss</div>
<div class="col-xs-2">sss</div>
<div class="col-xs-2">sss</div>
<div class="col-xs-2">sss</div>
</div>
</div>
</div>
<!-- End Weather -->
<!-- End Main Content -->
</div>
</div>
</div>
<!-- End Content -->
I am working on layout container in bootstrap. All of the work of me is working well. But I have fallen a little problem what I cannot solve this. Need your help.
Problem: I have a container, the code is look like this.
<div class="container main-container">
<div class="row">
<div class="col-md-3" id="sidebar" data-bind="visible: hideSideNavbar() === true">
<!--left menu starts here -->
<div class="span4" id="leftDiv">
<section id="form_Progress">
<!--ko compose: {view: 'formProgress'} -->
<!--/ko-->
</section>
</div>
<!--left menu ends here -->
</div>
<div class="col-md-9">
<!--right content starts here -->
<div class="span8 mainsection">
<section id="content" class="main container-fluid">
<!--ko compose: {model: router.activeItem,
afterCompose: router.afterCompose,
transition: 'entrance'} -->
<!--/ko-->
</section>
</div>
</div>
</div>
</div>
Here the container has two column one is ‘col-md-3’ and other is ‘col-md-9’. The column col-md-3 is hide or show conditionally. If I hide column 'col-md-3' then I want to set width of col-md-9 is 100%. I.e. I want fit the column 100%. Thanks.
I have problem with the Bootstrap grid system on my new website /services-page (kenpils.se.
I would prefer 3 rows with 2 columns instead to make the text in the columns better readable on tablet. Right now the columns are to narrow due to the icon on the left side of each column.
As far as I understand, each row is one div which makes it difficult to slide up the "commercial-column" next to the "editorial-column". There is also a divide30-class between the two rows.
Would appreciate some advice.
The solution to this I have found works best is to duplicate your content in a tablet layout. then use visible-* (documented here) class attributes to hide and make visible specific content to specific screen resolutions. You will need to add visible-* class attributes to your <div class="row"> and change your col-sm-4 to col-md-4 see below:
<div class="row visible-lg visible-md">
<div class="col-md-4">
<!-- Your Content 1-->
</div>
<div class="col-md-4">
<!-- Your Content 2-->
</div>
<div class="col-md-4">
<!-- Your Content 3-->
</div>
</div>
<div class="row visible-lg visible-md">
<div class="col-md-4">
<!-- Your Content 4-->
</div>
<div class="col-md-4">
<!-- Your Content 5-->
</div>
<div class="col-md-4">
<!-- Your Content 6-->
</div>
</div>
Then add a section under that in your code duplicating the information and hiding it on larger screen resolutions. see below:
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 1-->
</div>
<div class="col-sm-6">
<!-- Your Content 2-->
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 3-->
</div>
<div class="col-sm-6">
<!-- Your Content 4-->
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 5-->
</div>
<div class="col-sm-6">
<!-- Your Content 6-->
</div>
</div>
This will provide the formatting you desire. Hope this helps.
NOTE: THE BELOW SOLUTION DOESNT ALTER THE LAYOUT AT ALL as you require. It provides an alternative solution !
<div class="col-services">
<div class="row">
<div class="col-sm-4></div>
<div class="col-sm-4></div>
<div class="col-sm-4></div>
</div>
</div>
This means that the break wont occur until the width reduces below tablet-zone !
col-sm-4 -> break after tablet-zone width
col-md-4 -> break after normal desktop width
Replace it with
<div class="col-services">
<div class="row">
<div class="col-md-4></div>
<div class="col-md-4></div>
<div class="col-md-4></div>
</div>
</div>
This makes sure that the break occurs at the tablet level itself!
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>