BootStrap allows four types of classes for column/Grid System.
.xs // for mobiles
.sm // for tablest
.md // for laptops and normal desktops
.lg // for larger desktop
Suppose i want to create a webpage/website which should be more resposive (definitely it must be) for all type of media. from mobiles to larger desktop. Can i use classes in this formate.
Note: In this example i am going to create left side column.
<div class="left-col col-xs-12 , col-sm-12 col-md-3 col-lg-3">
In above Example , i used col-xs-12 so that when screen is smaller then its width should be 100% , similarly col-sm-12 . and i used col-md-3 so that if screen size is more than 700px(approx) , the column's width should be 25% and similarly with col-lg-3.
So again i repeat my Question that should i combined all four classes to make more responsive and dynamic webpages?
The following might be enough to achieve your goal
<div class="left-col col-sm-12 col-md-3">
It will use the full width when the device is a tablet or below. And it will use 1/4 of the width when its a laptop or larger desktop pc.
Related
I would like to display a number of cards in a flexbox.
Unfortunately, the items do not wrap properly in some browser window sizes. Example:
My Code:
<v-row>
<v-col v-for="n in 7">
<v-card
max-width="344"
outlined
min-width="350"
height="120"
>
Card
</v-card>
</v-col>
</v-row>
I created a pen for this: https://codepen.io/Tenarius/pen/poywYYW
The problem is particularly with a resolution of 1920x1040.
How do I set the items so that they wrap exactly on top of each other despite min-width and max-width in every resolution?
You need to remove flex-grow: 1 from .col.
It's distributing free space between the items.
Being that the number of items in each row varies, the free space will vary, leading to an uneven distribution.
I am trying to use the Vuetify Flex CSS Helpers to create cards with varying heights. The cards can wrap when there is no more space. However, I would like the wrapping to be more intelligent. Right now they wrap to the bottom of the previous "row", but is there a way to get them to wrap to content with the highest bottom to minimize the amount of space is allocated for the entire component? Here is some sample code:
<v-card class="d-flex flex-wrap" color="grey lighten-2" flat tile>
<v-card class="align-self-start" outlined tile>
...
</v-card>
<v-card class="align-self-start" outlined tile>
...
</v-card>
...
</v-card>
Here is a full CodePen example. In it you will see when the last card wraps, it goes to be under the first card. But there is a lot of vertical space between the first card and the last card now. I would like to remove that vertical space. Is this possible?
Thanks
My goal is to create an input like the one described as being 'outline variant' in these Material docs.
How do I configure and/or what CSS should I add to materialize CSS forms to use the 'outline' variant?
There appears to be a few issues/requests for this outline variant, but the Materialize folks have indicated that it wasn't part of the spec at the time and have subsequently closed the issues.
I dug through some of the Material samples versus styling on the Materialize framework and noticed that they are handling things slightly different as far as padding, borders/shadows etc.
Achieving this outline variant as the default treatment is going to require some slightly destructive style updates that should probably be handled via the preprocessed files, but here is an example of some quick and dirty overrides
Note the addon class "input-outlined" in the markup:
<div class="col input-field input-outlined s6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
As far as I can tell, they're related but not the same project and do not use the same CSS files. I was using a CDN link for Materialize for a little while and none of the Material.io classes were taking effect.
Then I switched over to using the suggested Material.io CDN links, found here: https://material.io/develop/web/docs/getting-started/
Once I did that, I could use the HTML markup and class names that became visible on the page you provided after I clicked the "Web" tab.
It works. Here is a Codepen showing both styles of text inputs in action (this Codepen is using the Material.io CDN links in the settings).
The main difference between filled and outlined is that filled looks to be the default. I'm inferring that the Material.io design system has you repeat the classname and append a modifier if you wish to deviate from the default.
For instance, in the linked codepen, notice that the filled (default) text field is inside <div class="mdc-text-field"> while the outlined text field is inside <div class="mdc-text-field mdc-text-field--outlined"></div>.
I'm using Twitter Bootstrap for presentation. The design calls for labels and input fields to be on the same line for desktop and stacked for mobile. To achieve this I would like to use TB's grid system but I can't find a way to do this. Looking through the documentation I can see how to apply a class to the wrapper div for a label/input pair but not to the label and input fields individually.
http://jsbin.com/voreyev/edit?html,js,output
You could always use the standard bootstrap grid system to achieve this. E.g.
<label class="col-sm-12 col-md-4">name</label>
<input type="text" class="col-sm-12 col-md-8" />
This will use the media queries built into bootstrap to force the label onto its own line on small screens and inline on larger screens.
I am trying to move text next to my header, but it is not working using margins - when i try to move it all the text boxes move, even though each text box is a seperate div tag.
Here is my code for this part
<body>
<div id="wrapper">
<div id="header">
<h4><strong>Qtek Australia</strong></h4>
<div id="home">Home</div>
<div id="Aboutus">About us</div>
<div id="Contactus">Contact us</div>
<div id="Location">Location</div>
</div>
i am trying to move the home, about us, contact us and location to the right of the header "Qtek Australia", please help
You can try wrapping the h4 in another div and placing it where you want.
If this is the way you already tried, another way could be wrapping the three div you want to place on the left in one div, the other four in another and move around these two divs. It should be easier, even if you can get divitis doing so.
I will say that your document semantics are quite vague. You probably don't need to use STRONG inside your heading - it's conceivable that you really mean to emphasize the thought expressed in it, but I suspect that you only want the heading to appear bolder. Use CSS to achieve that, as in: h4 {font-weight:bold; font-size: 14em;}.
It's also conceivable that your page makes the most sense with the navigation starting at the fourth level of some topic, but it's highly unlikely; in the vast majority of cases, the navigation would exists higher up - under h1 or h2.
Your navigation itself would be more coherent if it was an unordered list.
<ul>
<li>Home</li>
<li>About Us</li>
...
</ul>
This also has the advantage of allowing you to style the navigation elements both as a set and individually.
You probably don't need to be wrapping your elements in all those divs. Most elements in HTML are containers - headings, lists, paragraphs, just about everything can be styled - including positioning and moving - by itself.
For instance, one means of positioning the navigation list to the right of the h4 would be to style the h4 with "display:inline", or "float:left", which would bring the following element (the list) onto the same line. There's a lot of different ways to go about that kind of positioning, and it's not even clear that this is what you're after.
Clarify what you mean; and it would help if you posted whatever CSS or JavaScript you're using.