I changed my grid system to bootstrap and I'm finding out that its not static. It seems to adjust to the screen size when the span's are specific sizes. I did not want to remove responsive.css file to see if it works. I've seen several sites built using this system and some are static. My question is how do I do this?
<div class="container">
<div class="span3">Logo Placement</div>
<div class="span4 offset4">Weather Modal</div>
<div class="span12">Nav placement 940px</div>
<div class="span12">imageslider placement</div>
<div class="row">
<div class="span12">
<div class="span4">sidebar placement</div>
<div class="span6">body content placement</div>
</div>
</div>
</div>
It doesn't center, and it seems to shrink based on the browser. I do not know what values to use or what to change.
Just uncheck the "responsive layouts" before you generate and download your code on the bootstrap website. That should make it so your website has a static grid.
Related
I wanna add a simple text box to side of my page.
I have a table. So when the widget has added the table has to be decrease it's width.
Thanks in advance!
.
Probably you need to create a layout (https://getbootstrap.com/docs/5.2/forms/layout/) with properly setup grid system and have a place for your widget. So checkout the layout and grid system in bootsrap first to understand.
<div class="row">
<div class="col">
Your table
</div>
<div class="col">
Widget here
</div>
</div>
I'm working on a project that uses a masonry layout to display a list of multiple boxes with variable heights. But in this project, I use a filter that when clicked, filters all the boxes based o a class, and hides the one which doesn't have that class. The problem is that when I hide some boxes the whole structure of the layout brakes, and I cant simply remove the boxes because the filter can be deactivated and all the boxes appear again, or his class argument can also change, modifying the visible boxes again.
The Masonry script and CSS that I'm using it's this this, above is the structure that I'm using for my boxes:
<div class="masonry-root">
<div class="masonry-cell">
<div class="masonry-item">
</div>
</div>
<div class="masonry-cell">
<div class="masonry-item">
</div>
</div>
</div>
Simply hide the elements didn't work.
Removing and hiding the elements and then calling the script again also didn't work.
If anyone is having trouble with this, I fond a better way to deal with my problem.
Use the Mansory Dessanto plugin solved my problem completely. The structure of the code got simpler and you can add, hide, and remove blocks on the grid and it will organize it again.
<div class="grid">
<div class="grid-item">
<div class="content"></div>
</div>
<div class="grid-item">
<div class="content gray"></div>
</div>
<div class="grid-item">
<div class="content"></div>
</div>
</div>
With this structure I do all the layout preparation with a single function, like this:
// inicialize the plugin layout
$('.grid').masonry({
// options
itemSelector: '.grid-item'
});
// a simple event could trigger the next part
// hidding the selected element
// (remove has the same efect but the elemnte would not appear again if
// necessary)
$('.content.gray').hide();
// executing again the plugin
$('.grid').masonry();
I have an example that contains some elements. When i scroll so fast elements not showing and slowly loaded. Is this bug or any other problem ?
My html structure:
<div class="site-header">
This is site header
</div>
<div class="site-content">
<div class="wrapper">
<div class="item-container">
<div class="wrapper">
<div class="image-container">
</div>
<div class="title">
<span>Hello World</span>
</div>
</div>
</div>
</div>
</div><!-- End of content -->
I created a example. Here is the link. You need to check it with a mobile device.
It's not bug. When you are trying to laod image in browser, for the first time, the browser will cache the image for faster laoding in next time. So for the first time it will take some time. If you want to load it faster try to use small size with good pixel ratio image (i.e compressed) , it will load faster when compared to normal one.
If you want read more about browser caching use this link.
Use Chrome lighthouse to check the static data performance(i.e images), check here.
let me know if this works
I'm working with Bootstrap 4 beta at the moment and everything works fine, but I have one problem... the display classes like d-none, d-inline, d-inline-block... don't have any effect. Everything else works just fine and I don't understand why they don't work.
for example:
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="bg-success d-inline">Test</h1> <h1 class="bg-success d-inline">Test2</h1>
</div>
</div>
</div>
Those h1 elements are still displayed as block elements. has anyone an idea where the problem could be?
Ok I think I found the problem. The CSS file has only the display classes with breakpoints, like d-md-inline... but the overall display classes d-inline, d-block, and so on are missing.
I'm building a web app with meteor. Right now, I'm trying to create this web page containing two templates.
Basic design layouts:
First template: This template includes the Left Menu Bar (4 tabs).
Next is what it looks like after adding the 2nd template (purple).
What I want to do is to switch templates in the purple area for the 4 tabs, while keeping the rest layout. I'm using bootstrap to set the layout. However, when I try to resize the window to a smaller one:
issue 1. the green and purple parts will stack on each other.
issue 2. After I set a top padding to move the purple area down, when I scroll down, there is still a part where these two templates will stack on each other.
What would be the best approach here?
Here are my codes:
<template name="layout">
{{header}}
{{> Template.dynamic template=template1}}
{{> Template.dynamic template=purpleTemplate2}}
{{> footer}}
</template>
Inside first template:
<div>
<div class="col-xs-12 col-md-3" >
//content - four tabs
</div>
<div class="col-xs-12 col-md-9">
</div>
</div>
Inside second template:
<div id="tab1">
<div class="col-xs-12 col-md-3" >
</div>
<div class="col-xs-12 col-md-9">
//tab 1 content
</div>
</div>
same as ...tab2 ...tab3 ...tab4
I hope this makes sense. I'll be glad to provide you with more details if needed. Thank you in advance for your help!!
JUST ADDED:
Ideally, it should look like this when I resize the browser:
However, it looks like this:
The left menu bar stays on top, which is what I want. But when I scroll down the purple area will scroll up and cover the menu. Also, the footer seems to stay with the purple area as well.
We can start by setting up wrappers to the dynamic templates. like this:
<div class="col-xs-12 col-md-3" >
{{> Template.dynamic template=template1}}
</div>
<div class="col-xs-12 col-md-9">
{{> Template.dynamic template=purpleTemplate2}}
</div>
This means you probably not need the bootstrap cols inside your dynamic html.
heres an example I whipped up:
http://codepen.io/nilestanner/pen/PGwAXL