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>
Related
I basically want to keep the nav with all of its contents at the top of the HTML, but have it moved to the bottom of the page with CSS as I am doing mobile-first approach and want the navigation to appear at the top when I resize it to tablet or laptop. I tried using minus with bottom tag but it takes forever to get it to the bottom and does not seem to be the most efficient way to do it. Is the only way to move the context to the bottom of the page is to put it at the bottom of HTML file or is there a completely different way I should approach this?
This is what I have at the moment:
I want to move the underlined links to the bottom, my code:
#topnavigationmenu li {
display: inline-block;
list-style-type: none;
font-size: 3rem;
padding: 10px;
}
<div id="mainpage">
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
The easiest solution: You can create two instances of <nav> and show one on mobile and on desktop using media queries.
Possibly better solution: You can use Flexbox (and even CSS Grid I guess) to change the order, so let's say inside the mainpage div you have two sections the nav and a div with your page content:
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
<div class="page-content">
<!-- Content here -->
</div>
You can add display:flex; to mainpage and manipulate the order these appear on mobile vs desktop/tablet using media queries.
I'd suggest checking these articles out:
Ordering Flex Items
A Complete guide to Flexbox
I am trying to do this:
and mine looks like this:
Not the most beautiful thing.
My questions are:
We have a header with logo, search bar, menus and a button. How can i stack them all inline?
On the div with the background image - how can I position the headline like the one in the original site?
1) Have a look at the Navbar component documentation. Items should already be inline if implemented correctly. You can use the navbar-left and navbar-right classes to position items in the navbar.
2) You'll notice the large centre text starts at the same position as the navbar logo. This is because of the container class. I suggest you analyse some examples to see how to correctly implement the container.
After that, if you're still struggling add your styles.css to your pastebin post or better still create a Codepen - this would allow someone to be more helpful.
1- you can write float:left; or float:right; ? look for this float
2-for position an element you must create a relative div later inside create absolute div.. and you can specify settlement coordinates with top right bottom left.. look here position
I would say float is not good practice to use . Unless you really have no choice to use.
But based on how I look at it.
It's achievable using flex.
Put a display:flex on your main div
Then as for your other elements . Use display:flex-grow
It's advantageous using flex. , not only it wil solve your problem. It makes your site responsive.
Cheers
[![if you need all navigation item in one line. you have to make display:inline-block,for navigation.
change your code to:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 nav-wrap">
<ul class="pull-left"><li></li>
</ul>
<ul class="pull-left">
<li class="formSearch">
<input type="text" placeholder="Find Freelancers" id="searchButton">
</li>
<li>Browse</li>
<li>How it works</li>
</ul>
<ul class="pull-right">
<li>
<a href="#" class="signupHover">
<span class="icon signup"></span>
<a href="#">Sign Up
</a>
</a>
</li>
<li>
<a href="#" class="loginHover">
<span class="icon login"></span>
Login
</a>
</li>
</ul>
<button type="button" id="buttonHeader">Become a freelancer</button>
</div>
/*add below css*/
.nav-wrap ul li{display:inline-block;}][1]][1]
When you look at that pen: http://codepen.io/helloworld/pen/eNpBdb
where I use bootstrap 3 css cdn attached.
<div class="container">
<div class="row">
<ul style="background:orange;" class="nav navbar-nav">
<li><a title="" href="http://test.com/en/deu/disclaimer/imprint.html" target="_self">disclaimer</a>
</li>
<li><a title="" href="http://test.com/en/deu/disclaimer/imprint.html#!/content=privacy" target="_self">Datenschutz</a>
</li>
<li><a title="" href="http://test.com/en/deu/disclaimer/site-map.html" target="_self">Sitemap</a>
</li>
<li><a title="" href="http://test.com/en/deu/disclaimer/contact.html" target="_self">Kontakt</a>
</li>
</ul>
</div>
When I resize my browser window to under 767px in width, why does the left margin/padding/space of the disclaimer hyperlink and all other 3 hyperlinks disappear?
Who removes that space? I need them as it looks very bad on small devices.
The row class has
margin-left: -15px;
margin-right: -15px
The child column items have their own padding them.
This is meant to line up with the
container that has
margin-left: 15px;
marign-right: 15px;
Solution: Remove the row class, or use the column-xs-12 class for your child element.
The classes you are using "container", "row", "nav", "navbar-nav" are all classes within bootstrap, because bootstrap is built to be responsive after browser resizing it will attempt to make it easier for smaller devices(phones, tablets, etc) to use this can be overcome by adding a custom css file under the bootstrap include and setting certain properties to !important.
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)
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