I need to use some properties of Bootstrap explained here.
I write the following code in my template:
<div class="row row-content">
<div class="col-12 col-sm">
<h2>Corporate Leadership</h2>
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p class"d-sm-none d-md-block">This has to be hidden in small sizes</p>
</div>
</div>
The problem is that it isn't working. I don't know if I had to import some scss class, but the teacher specified that we only need to use css.
First of all, your paragraph element class attribute is missing = sign. Fix it by
<p class="d-sm-none d-md-block"> ... </p>
Secondly, gladly that you included a link to Bootstrap display property documentation. If you read through that, .d-{breakpoint}-{value} means from the {breakpoint} and up, it will display as {value}. So:
d-sm-none -> display as none from breakpoint sm and up
d-md-block -> display as block from breakpoint md and up
Combining those 2 will give you the effect of display none between the breakpoint sm and md.
If you want to hide the paragraph for small screens, you can set its display to none from the beginning, and change it to block for breakpoint md:
<p class="d-none d-md-block"> ... </p>
Fiddle: http://jsfiddle.net/aq9Laaew/104005/
By the way, col-sm class on the <div> is unnecessary. It's only useful when you have more than 1 column and you want them to have equal width.
Are you importing Bootstrap?
Add the following to your <head> if not.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Related
I am new to bootstrap and I would like to add cards to the default index page that is scaffolded when I start a new ASP.NET MVC project
My understanding is that bootstrap includes a border on the card. However, when I ran the application, the card border was not rendered.
I searched the web, of course, and found these two related question on SO:
Bootstrap cards not showing like in examples
What is the '.well' equivalent class in Bootstrap 4
I noticed in my project that it loads with bootstrap V3. Using NuGet, I uninstalled v3 and installed Bootstrap V4. I made sure the correct files were being loaded in the Bundle.config file as well. Still, the border was not rendered.
Here is my html code which is based on the default index page generated when creating a project:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<div class="row">
<div class="col-md-4">
<div class="card border">
<div class="card-body">
<h2 class="card-title">Card title</h2>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>
The code I changed is in the first column of the row. (the ellipses in the other columns represent the code generated by visual studio). I added the border class but a border is not drawn in Chrome. I have also tried adding border border-primary but the border still does not render.
I fully expect to see a border around the card but cannot seem to get it working. Any assistance would be appreciated.
I got this working. Adding the border class seems to have been the problem. I might have needed to recompile to get version 4 into the executable but in any event, using the example in the documentation on the Bootstrap web site rendered the border. Adding the border-primary class to the card element successfully changed the color. I think the critical lesson is that Bootstrap version 4 is needed and VS loads Bootstrap Version 3.
I have the following code.
<section class="visit-section mb-7 mt-7 mb-sm-3 mt-sm-3 nb-md-5">
</section>
In the developer tools in Firefox, when I select the element with the picker, it doesn't seem to be recognizing the class mb-sm-3 or mt-sm-3. In other words, the spacing that it is adding is from mb-7 and mt-7. After looking for 30 minutes, I'm not entirely sure why this is happening. :-\
Did I understand it wrong from the Bootstrap 4 manual?
Bootstrap Manual
The idea you have should be working well, but a couple things I noticed on you code that are preventing it to function properly:
Bootstrap's spacing utilities go from 0 to 5, as in mb-0 | mb-5, there's no mb-7 unless you specify so yourself. See here
Keep in mind that sm breakpoint applies to smartphones in landscape orientation; so maybe you are not triggering the correct breakpoint yet
If you try the code below in full screen, you can see that the margins actually change when you resize the browser window; all I did to your code was changing the mb-7 classes to mb-5 and fix a typo on the last class you had as well
section {
height: 100px;
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="visit-section mb-5 mt-5 mb-sm-3 mt-sm-3 mb-md-5">
</section>
<section class="visit-section mb-5 mt-5 mb-sm-3 mt-sm-3 mb-md-5">
</section>
I'm using multiple window on the same page and i want to apply
different styles on which window. I try to write a wrapper over the
window so it can be identified in the css by id but that does not work.
This is the source:
<div class="wrapper">
<div kendo-window="InitialisingApp">
</div>
</div>
This is the result:
<div class="wrapper"></div>
<div class="k-widget k-window....">
..........................
</div>
Any ideas about this problem?
Thank you! Have a nice day!
You can take a look at this:
Limit scope of external css to only a specific element?
Only other option that I see is to copy the theme and add a css selector in front of everything so that the theme only apply when wrapped with a specific class. Also keep in mind the CSS priorities to make sure the blue style gets applied over the default style.
Example:
<style>
.blueStyleWrapper .k-window {
/* Some kendo styles */
}
</style>
<div class="blueStyleWrapper">
<div class="k-window">
This window will be using the blue theme!
</div>
</div>
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
I have started work on a new project and decided to give Foundation 5 a bash to see what it's like. The first thing I noticed in the documentation when creating forms with horizontal fields is they use a large number of divs for styling. So I tried an example below (second example I tried it without divs):
<!-- Example with extra divs -->
<div class="row">
<div class="large-2 columns">
<label>Contact</label>
</div>
<div class="large-6 columns left">
<select></select>
</div>
</div>
<!-- Example without extra divs -->
<div class="row">
<label class="large-2 columns">Contact</label>
<select class="large-6 columns left"></select>
</div>
These both achieve the same thing with slightly different styling. I was wondering if anyone could explain why I would use the first one (follows foundation documentation) and not the other ... with less html! I am guessing it has something to do with how foundation is used and I am just not up to speed with it enough yet.
Thanks
Having <label> in <div> will give you lot of flexibility in styling. Defining a class for <label> will restrict your styling options. For a <div> you can define height, background color, border, width, background image, gradient fill, margins, padding, and lot more. Whereas giving <label> a class name would not let you do those styling. You could try it.
Basically, a <div> works as a box or container holding some content element in it, and that gives you lot of power and flexibility in styling. Whereas defining classes for content element doesn't give you that flexibility and power.