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 -->
Related
I am very new to vue, this probably is very basic question. I want a page with 3-col layout, where two columns should be in default.vue and the one column should be in a page, say index.vue. I have created everything in default.vue and it works fine but I can not maintain that when I move the content to index.vue file. Here is overview of what I have:
<html>
<body>
<div class="row">
<div class="col-2">
<div class="row">
<div class="col">
Navigation
</div>
</div>
</div>
<div class="col-8"> <!-- I need this div in index.vue -->
<div class="row">
<div class="col"><WelcomeText></WelcomeText></div>
</div>
<div class="row">
<div class="col">Card 1</div>
<div class="col">Card 2</div>
<div class="col">Card 3</div>
</div>
</div>
<div class="col-2">
<CompanyCard></CompanyCard>
</div>
</div>
</body>
</html>
Here, if I move the whole div including col-8 to index.vue then CompanyCard moves to left near the Navigation and the main div goes below that. On the other had, if I just keep the line <div class="col-8"> in default.vue and move the content (2 rows inside this) to index.vue. The CompanyCard remains at right, as it should but the middle column is blank and the content is below that. How do I maintain that 3-col format across default.vue and index.vue ?
I am using Nuxt with Vuetify.
Thank you!
If you're using Nuxt then you should use <Nuxt /> component inside defualt.vue. this will include the page component
you can check nuxt layout docs
example for default.vue:
<template>
<div class="row">
<div class="col-2">
<div class="row">
<div class="col"> Navigation </div>
</div>
</div>
<div class="col-8">
<!-- I need this div in index.vue -->
<Nuxt />
<div class="row">
<div class="col">Card 1</div>
<div class="col">Card 2</div>
<div class="col">Card 3</div>
</div>
</div>
<div class="col-2">
<CompanyCard></CompanyCard>
</div>
</div>
</template>
now inide your index.vue add:
<template>
<div class="row">
<div class="col"><WelcomeText></WelcomeText></div>
</div>
</template>
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>
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'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>
Actually i have designed the template for one of my games site. In the when i play the game iam getting some problem in IE9 but no issues with other browsers. For clear understanding the issue please see this
play page Code:
<div style="float:left">
<div class="gameContentsurround">
<div class="gameContentbg">
<div class="gameDiv">
<div align='center'>
<!--game content here-->
</div>
</div>
</div>
<div class="gameboxbelowheight"></div>
</div>
<div style='height:5px'></div>
<div style="clear:both"></div>
<div class="gameDesc">
<!--game description here-->
</div>
<div class="moregamesbg">
<div class="moregameswhitebg">
<!--more games section here-->
</div>
</div>
</div>
<div style="float:right; width:390px">
<!--right column where actual issue comes here in IE9-->
</div>
right_column code:
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<center>
google ads
</center>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Ads END -->
<!-- Ads -->
<!--<div><?php echo SPONSORS_TITLE;?></div> -->
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<center>
google ads
</center>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Ads END -->
<!-- Comments Section -->
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<div style="overflow:scroll">
fb comments
</div>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Rating Section -->
<div class="ratethisgameWhiteBg">
<div class='ratethisgameDiv'>
rating system
</div>
</div>
Add width: 390px to content's first child.
When you use floating elements you should always set their width