I've recently started using bootstrap 3 and I'm really loving the grid system.
I am however stuck trying to implement the following layout.
Is it possible to create something like that with bootstrap?
I have read on the documentation about Column wrapping, is that the way to go?
What would be the best approach to achieve it?
What people often forget when using bootstrap is that it is fully customisable. You can use your own css to size and position divs as long as your css code goes after bootstrap.
Here is something similar to what you are trying to achieve: fiddle
<div id="wrapper" class="">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
Toggle Menu
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
I don't think that you can do it only with bootstrap.
You should probably use https://github.com/desandro/masonry that solves this exact problem.
Bootstrap uses float to position your columns, while Masonry compute absolute position to put the div on the right place.
You can still use Bootstrap for defining responsive behaviour of your column (the width propriety)
Related
Hello Im having problems with foundation 6. In my footer there is a social list with 4 icons(phone, email, twitter, facebook) I cant get them to stay centered on resize. On my PC it seems fine, however, uploaded onto the web and viewed on my phone(nexus 6) the icons are off center to the left. here is my footer code
<footer>
<!--social icons should be centered -->
<div class="row">
<div class="large-3 medium-centered columns">
<ul class="menu social">
<li>
<a href="http://www.twitter.com">
<i class="fi-social-twitter"></i>
</a>
</li>
<li>
<a href="http://www.facebook.com">
<i class="fi-social-facebook"></i>
</a>
</li>
<li>
<a href="tel:12345678901 ;="">
<i class="fi-telephone"></i></a>
</li>
<li>
<a href="mailto:info#example.com">
<i class="fi-mail"></i>
</a>
</li>
</ul>
</div>
</div>
<p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>
The site is www.gastromob.com. I could really use some suggestions on how to improve this site. I'm having several problems, but I'd like to fix this one first, thanks.
The class medium-centered that you use is meant to center a column within a row; it does not center the text inside that column.
Foundation 6 recommends using the <div class="menu-centered"> wrapper around the <ul class="menu">. If you're using Flexbox, you don't need the wrapper and can add the .align-center class to the ul element instead. Please click here for more information.
Using the row and column wrapper seems unnecessary here.
You could write your code this way to achieve what you need:
<footer>
<div class="menu-centered">
<ul class="menu">
<li>
<a href="http://www.twitter.com">
<i class="fi-social-twitter"></i>
</a>
</li>
<li>
<a href="http://www.facebook.com">
<i class="fi-social-facebook"></i>
</a>
</li>
<li>
<a href="tel:12345678901">
<i class="fi-telephone"></i>
</a>
</li>
<li>
<a href="mailto:info#example.com">
<i class="fi-mail"></i>
</a>
</li>
</ul>
</div>
<p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>
By the way, href="tel:12345678901 ;="" is incorrect and should be href="tel:1234567890" instead.
I've also looked at your site, and noticed that you set a fixed height for the element <div id="overlay">. As a result, when viewing the site on a small device, this overlay spills over and covers the elements below it. You should simply remove the fixed height to solve this problem.
The boat logo also obstructs the view when shrinking the size of the screen. You may want to make it responsive as well.
Other than that, all the other elements are responsive and look good!
This is my website code in HTML 5 In this code we make some sections as u see header banner and nav As I dont understand why we write Header Banner And Nav separately while in same Code And whats the main reason behind making these sections? And I dont understand That Banner Code Why we Use Banner Code?
<!-- Header -->
<header id="header">
<div class="logo container">
<div>
<h1>Malik Waqar Azim</h1>
<br><br>
<p>Bachelors in Software Engineering</p>
</div>
</div>
</header>
<!-- Nav -->
<nav id="nav">
<ul>
<li>Home</li>
<li class="current">About Me</li>
<li>Contact Me</li>
</ul>
</nav>
<!-- Banner -->
<div id="banner-wrapper">
<section id="banner">
<h2>About Me</h2>
<p>I am currently pursuing bachelors in software engineering at UET Taxila.</p>
<p>I completed my intermediate and matriculation from Fauji Foundation College Lalazar</p>
</section>
</div>
Different sections in html5 language are like boxes for some content. HTML5 language make structure of document of your webpage. Every web browser has their own standard CSS style. If you didn't link custom style, it use this one to know how to show the html elements.
This banner is div - box in which there are informations about you. In this example you have id of div. The 'id' attribute is neccessery if you want to set some styles for this particular box.
I'm trying to make this layout for a medium screen, where the black box is my container, and the red/blue boxes are in two different divs as follows:
<div class="col-sm-6">
<ul>
<li>
image
</li>
<li>
image
</li>
<li>
image
</li>
</ul>
<div class="col-sm-6">
<ul>
<li>
image
</li>
<li class="hidden-md hidden-sm hidden-xs">
image
</li>
</ul>
</div>
So the large screen works well, the mediums screen however does not work well, I want the first div to take the primary role and still display as 3 images in a row.
If you have a look at the twitter bootstrap documentation which can be found here you will notice that there are CSS classes for specifying different columns for different device sizes.
Using the information provided here you should be able to add the appropriate classes to your layout so that the layout will respond to the device size the way you want it to.
EDIT:
Remove the <ul>'s and <li>'s and replace them with this instead:
<div class="row">
<div class="col-md-4">...Image...</div>
<div class="col-md-4">...Image...</div>
<div class="col-md-4">...Image...</div>
</div>
I am facing a big css problem
I made a MDI system in html/jquery.
Inside the window clientzone I add html code with an ajax request and the use of the append method.
All is working fine.
My problem is about the code Inside the client zone.
You can see it here : http://jsfiddle.net/2P4Mb/1/
<div id="windowClientZone" style="height:300px; background-color:red; overflow:hidden;">
<div id="ajaxHtmlAppendedCode">
<h1>Title</h1>
<div id="ContentToBescrolled" style="overflow:scroll; background:yellow;">
<ul id="MediaExplorer" class="gallery">
<li class="DraggableItem">
<div/>
</li>
<li class="DraggableItem">
<div/>
</li>
<!-- ... -->
<li class="DraggableItem">
<div/>
</li>
<li class="DraggableItem">
<div/>
</li>
</ul>
</div>
</div>
I have a content made with two parts : a title, and a wrap panel based upon an UL with floating.
I want the ul control to be scrollable and the title stay always visible.
i tried a lot of things with overflow/position asbolute but i not able to find a solution.
the ul zone is always greater than the window client zone.
Is there a way of making that easily ?
Thanks for your help
I have a problem with Foundation 4 rendering on a small screen.
When on a local server i have the following html code, my custom css is turned of and so is my cutom js. All the needed libraries are loaded correctly as is the foundation library:
Why isnt my topbar showing in a very small browser window?
Below is a html snippet:
<div class="row show-for-touch show-for-portrait show-for-small">
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>title</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><h4>Dungeon</h4></li>
<li><h4>Pricing information</h4></li>
<li><h4>Contact</h4></li>
</ul>
</section>
</nav>
</div>
You won't be able to see your bar in a small browser if you add this visibility class: show-for-touch, which displays only on a real mobile environment.
If you like to see on a small browser, simply remove this class:
<div class="row show-for-portrait show-for-small">
It works on this plunk.