Stackblitz link for you all: https://stackblitz.com/edit/voltagery-capstone
You can see the design that I am going to.
I need some help trying to design this homepage for my capstone class. I have been trying to figure this out using a Jumbotron and having a text overtop of it. Any help would be awesome.
Nic What I want the homepage to look like
<--------------------------Updated Code------------------------->
How can I make 4 separate rows inside of this one column
<div class="col-xs-12 col-md-8 col-lg-8">
<div class="bg bg-left">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
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 need to create a UIKit grid like this:
This is my code:
<div className="uk-grid uk-grid-collapse">
<div className="uk-width-5-8">
<div className="uk-grid">
<div className="uk-width-1-2">.Variable..</div>
<div className="uk-width-1-2">..Modelo.</div>
<div className="uk-width-1-2">..Mes.</div>
<div className="uk-width-1-2">..Escenario.</div>
</div>
</div>
<div className="uk-width-1-8">BUSCAR</div>
<div className="uk-width-2-8">RANGE</div>
</div>
I've followed the example on https://getuikit.com/docs/grid.html (Nested Grid) but I can't get it, this is what I got:
Any tip? Could be fault of another css? I'm using an html template based on UIkit.
UPDATE: When I remove this width I got what I need:
But I can't edit that source, there must be another way to do it. Adding width inline won't work.
Excuse me, but please remove className from your html, use class instead;) And it seems that theres no 5-8ths in grid docs neither in src folder(have looked, but couldn't find)
I'm typically more of a backend guy, but I find myself working on a project that requires some frontend work. I'm fumbling my way through using bootstrap, and I find myself stuck on the following:
<div id="form" class="col-md-6">
<!-- form goes here -->
</div>
<br /> <!-- multiple br tags do nothing, as long as col-md-6 is used above -->
<div id="image_container">
<image src="myimage.jpg" />
</div>
I want a gap between the end of the form and the top of the image, but col-md-6 seems to be resulting in there being overlap, and the image-div is vertically larger than it is on the same page with col-md-6 removed.
Admittedly, CSS has never been my forté, but I'm hoping to address that soon. In the meantime, can someone help me out with this issue?
Seems you're not using the grid system correctly, you have to use rows and cols to separate your elements in your frontend.
Check this link about Bootstrap Grid System
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
I've got a problem as in this Question
CSS Two Columns of Lists - responsive merge into one column
The problem with this solution is when the items have different heights. Put in a <br> and you see what i mean. I am looking for a solution where the side by side cells have automatically the same height.
I created a fiddle that shows how the result should look like.
http://jsfiddle.net/w4n9da10/
Is it somehow possible to create this without using JavaScript or doubling the markup, like i did in my example?
Thanks in advance
Utilizing a responsive framework such as Bootstrap will make your life a whole lot easier when it comes to doing something like this. However, I understand, sometimes it is not permitted by the client's environment or other restrictions. But, the concept remains. So all you have to do is use the browser inspector to see which classes are being used and their properties and use those only. But again, if you can use bootstrap, I recommend it.
I am attaching a demo HERE
And here is the code
<div class="wrapper">
<div class="col-md-6 col-xs-12">
<div id="1" class="col-md-12">1</div>
<div id="2" class="col-md-12">2</div>
<div id="2" class="col-md-12">3</div>
</div>
<div class="col-md-6 col-xs-12">
<div id="3" class="col-md-12">4</div>
<div id="4" class="col-md-12">5</div>
<div id="2" class="col-md-12">6</div>
</div>
</div>
Good luck