I've been trying to work out the widget feature, however I'm unable to get this working as expected. This is my header as of now:
<div class="col-xs-6 col-md-6">
<div class="widget-header">
<span class="widget-caption header-title"> User Groups </span>
</div>
</div>
It's actually been irritating since I'm unsure what I've been doing wrong, all I want is the default widget shown here:
http://beyondadmin-v1.6.0.s3-website-us-east-1.amazonaws.com/widgets.html
Please make sure that you've referred the stylesheets of Beyond template.
<!-- Beyond styles -->
<link href="assets/css/beyond.min.css" rel="stylesheet" />
The location of href may vary according to your folder structure.
Ref URL: http://apps-empresariales.com/conta/dev/docs/
Related
I am trying to create a portfolio by combining two themes.
The first theme and basis for the project is this one. I like the whole moving stars effect so that is why I decided for this one.
The second theme is this one. From this theme I want to take the grid system with the cards and implement it into the first one. .
To do this, I have copied all the files from the second project that I think are relevant into the first one and I kind of got what I want. But, somehow the full effects are not implemented. My project can be accessed from this repository.
To show an example:
One post looks like this. Ideally it should be only one picture which when opened should show the full version of the post. I tried to copy the css variable into the html file in a <style> COPIED HERE </style>.
I am an absolute beginner and my goal is just to get a working webpage. Could someone hint me why I am not getting the expected effects?
Just a guess because your post does not include your HTML and CSS and your page isn't showing the non-working sample site from your screenshot.
The grid with the images uses the Bootstrap grid system as you can see on the col-sm-4 below.
Here's the file that includes bootstrap, _includes/js.html:
<!-- jQuery Version 1.11.0 -->
<script src="{{ " js/jquery-1.11.0.js" }}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{{ " js/bootstrap.min.js" }}"></script>
...
You may need to inspect the grid part even more:
<div class="row">
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal-1" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/cabin.png" class="img-responsive" alt="image-alt">
</a>
</div>
...
According to Bulma's site (and everywhere else) modals are not supposed to show unless they have the "is-active" class attribute. However, my modals keep showing up as formatted text wherever I put them. They do not pop-up over the page, and they always show. I'm guessing I need to add something in mystyles.css as "modal" never appears in the 3416 lines of code created by Bulma.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" rel="stylesheet" />
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content has-background-white py-5 px-5">
<h3 class="title mb-6">
Hi mom
</h3>
</div>
</div>
And here is what my site looks like on page load:
Does anyone know what code I need to add to get the regular modal behavior?
In your code snippet it works just fine and the modal is being hidden (display: none; on the .modal class by bulma). So you are probably not loading in bulma properly..
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 am getting alignment problem while using bootstrap in visual studio specifically with bootstrap columns. when i using div with class col-md-4 it just automatically moves some space right and not align properly...... but when the code is writing in notepad++ and and save as .html file it works correctly...
help me to find out what exactly problem with visual studio2013
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestForm.aspx.cs"
Inherits="WebApplication1.Pages.TestForm" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="../css/bootstrap.css" rel="stylesheet" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="jumbotron no-Margin">
<p>H5BP contains a number of best practices or
common inclusions for your initial HTML
template,which is more like the generic "default"
template you would use as server-side global
template.Bootstrap does not provide anything like
this(nor does it need or aim to). So in this
regard,H5BP is perfectly suited to including HTML
components from anywhere else (e.g. those from
Bootstrap).
</p>
</div>
</div>
<div class="container">
<div class="col-md-4">
<p>H5BP contains a number of best practices or
common inclusions for your initial HTML
template,which is more like the generic "default"
template you would use as server-side global
template.Bootstrap does not provide anything like
this (nor does it need or aim to). So in this
regard,H5BP is perfectly suited to including HTML
components from anywhere else (e.g. those from
Bootstrap)
</p>
</div>
<div class="col-md-4">
<p>H5BP contains a number of best practices or
common inclusions for your initial HTML
template,which is more like the generic "default"
template you would use as server-side global
template.Bootstrap does not provide anything like
this (nor does it need or aim to). So in this
regard,H5BP is perfectl suited to including HTML
components from anywhere else (e.g. those from
Bootstrap)
</p>
</div>
<div class="col-md-4">
<p>H5BP contains a number of best practices or
common inclusions for your initial HTML
template,which is more like the generic "default"
template you would use as server-side global
template.
</p>
</div>
</div>
<script src="../js/jquery-1.12.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</form>
</body>
</html>
browser view are given as images below
image showing columns alignment error when using visual studio
image showing columns align properly when using notepad++
My best guess is that your stylesheet is not loaded.
are you sure "../css/bootstrap.css" is the right path?
you are moving one level down to localhost and then looking for the folder css
Open the developer console by hitting F12, move to the timeline tab and inspect the request of your css file.
There is no other magic that Visual Studio does to your css!
I'm using Visual Studio 2012 for an MVC web app using code first method with EF 5.0.
I have written the following code to make a modal window appear at some point:
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"><img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/></div>
<div id="mod-content"></div>
</div>
</div>
If works fine, exept that the image <img src="~/Content/icons/close.png" [...] /> cannot be found by the browser which thinks its URL is
http://localhost:49895/Class1/Home/~/Content/icons/close.png
To be precise, every code under my div's got broken URL. If I put my image above the div's it's displaying correctly with the following URL:
http://localhost:49895/Content/icons/edit.png
Do you have an idea where i messed things up?
Edit2: example (after problem being resolved)
This works:
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
This doesn't work:
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
Could be a bug in the new Razor 2.0 tilde parsing, or you've mucked up your html by missing a quotation mark or something. Try using the more explicit way of resolving urls
<img src="#Url.Content("~/Content/icons/close.png")" />
If that works then it suggests a razor bug, if it doesn't then your html is probably broken somehow but the extra # symbol may be enough for the parser to kick in and tell you what is wrong.
~ is an asp code element, not HTML. As such it doesn't get rendered by the HTML.
Try wrapping your src with #Url.Content
<img src="#Url.Content("~/Content/icons/close.png")" />