First off, I am new to css / wordpress etc so not very experienced.
I need help with card layouts. I want this to have the same layout as this, as in I want the cards to be in 2 columns instead of a 1. Messed around with the code a lot and can't seem to get it...
Would post pastebins but <10 rep so can't post >2 links.
EDIT: see comments for pastebins and more info.
Thanks in advance!
First of all i tell you we need your code sample to help you.
I will explain how to do it with bootstrap framework
You can have something like this:
<div>Business Strategy</div>
<div>Boosting Company</div>
<div>How High Growth...</div>
<div>Uk Company Dashboard</div>
You have to import the bootstrap CDN you can get it on this link:
http://getbootstrap.com/getting-started/
After that you will apply a colum grid in the clases of your divs and surround all of them in a "row" div it will look like this:
<div class="row">
<div class="col-xs-12 col-sm-6" >Business Strategy</div>
<div class="col-xs-12 col-sm-6">Boosting Company</div>
<div class="col-xs-12 col-sm-6">How High Growth...</div>
<div class="col-xs-12 col-sm-6">Uk Company Dashboard</div>
</div>
With that classes you are telling the browser that the divs will be displayed as full width when the screen viewport is less than 700px and half width when the viewport is higher.
This is the easyest way for begginners, I recommend you to read the bootstrap tutorial on W3CSchools it will help your first steps in the resposives frameworks
http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
Here is the explanation about why you should use that classes
Good Luck!
Related
I have a row class inside a col class using bootstrap 4 which looks perfect on desktop, but for mobile I want to force the row to be below it's parent row when the page is viewed on mobile. So technically I want to 'break out' of it's parent without changing the height of the parent. Here's an example of what I have currently on desktop:
And what I'm trying to achieve on mobile:
My code is just basic bootstrap with no additional CSS changes:
<div id="jumbo" class="row">
<div id="info" class="col-xl-6 col h-100">
<div class="row">
<div id="info-text" class="col offset-md-2">
<p class="display-4">Estate planning made easy</p>
<p>
Let’s get a clear plan in place for your money,<br>
property and other assets here and now.<br>
It’s never too early to protect what’s important<br>
to you and your family.
</p>
<p class="museo-sans-900">Get your free personalised report in just 20 minutes</p>
<button class="btn btn-brand-secondary">Start Now</button>
</div>
</div>
</div>
</div>
You can make two versions of the section. One like the first one and one like the second. Then put id=#desktop for the first and id=#mobile for the second . Then be sure to mark #desktop{display:none} for #media only screen and (max-width: (insert width of mobiles)), and #mobile{display: none} for min-width: (insert width of mobiles) . It s a long way, but if you don t find another easier way you can try this.
I am trying to find a way to make bootstrap grid more fluid in showing information.
this is the code I am using now.
<div class="container-fluid">
<div class="row design">
<div class="col-lg-4 wow fadeInUp">
<img src="assets/images/projects/traverse/01.jpg" class="imgs">
</div>
</div>
</div>
but after having like 5-10 of these, the result is something like this.
how can I fill that empty spot in there? the pics I am uploading are not of the same parameters.
or when it is an empty spot, how to add make the grid more responsive and fill the empty parts in there?
I am using only css and html, but don't mind javascript or something else as long as it gets the ob done
this is my first question, so please, do not judge strictly. The essence is in follows: I imagine block structure of document as a printing press - but very remotely, of course - because press already hase content and semantic, while div's structure of document - only skeleton for it, and both mentioned subjects must be added. An object of concern to me is where I should put this semantic in document skeleton, formed with twitter bootstrap and defining structure - for example:
<div class="container">
<div class="row">
<div class="col-xs-12">
Content, which must be wrapped in some semantically meaningfull element - like, for example - article-preview class
</div>
</div>
</div>
I see two different ways, but dont know, what way is better practice in marking down html documents:
1) Adding semantic class to element, which already have class that forming my document structure - col-xs-12 - or press in my analogy.
<div class="container">
<div class="row">
<div class="col-xs-12 article-preview">
'Content, which must be wrapped in some semantically meaningfull element like, for example - article-preview class'
</div>
</div>
</div>
2) Or adding brand new semanit block under structuring block and putting my content here:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="article-preview">
Content, which must be wrapped in some semantically meaningfull element - like, for example - article-preview class
</div>
</div>
</div>
</div>
I apologize if the question seems a little stupid to you, but I thinking about it for really long time and from now on can not do anything until it is resolved.
Thank you!
I will prefer the second way. Because bootstrap cols have their own styles and structure, so if you have additional styles or codes try to do like second way.
I think we should keep the bootstrap structure.
Go with the first approach because I feel the second approach will make your code long unnecessarily.
With the first approach as well you can add your custom styles. just add your stylesheet after the bootstrap css.
I'm using Bootstrap for the first time.
Trying to learned the grid-system of push and pull.
<header>
<!-- Main component for a primary marketing message or call to action -->
<div class ="container">
<div class = "row">
<div class = "col-xs-12 col-sm-8">
<h1>RSisdtorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div >
<div class = "col-xs-12 col-sm-4">
<h1> hello brother</h1>
</div>
</div>
</div>
</header>
It does not change the html page at all.
is it necessary to include whole code to look at the problem?
Check out this example from the bootstrap documentation: http://getbootstrap.com/css/#grid-example-mixed
The way you are using the grid classes, your divs will be full-width on xs screens, but on sm screens, the top div will be two-thirds width and the second will be one third width. Anything bigger than a small screen will be reflect this division.
If you are using Chrome, open the Developer Tools and resize your page, making it smaller, and you will see the change.
Bootstrap has a different class syntax for push and pull, read the syntax here: http://getbootstrap.com/css/#grid-column-ordering
I've seen lately a lot of discussions about this new concept called oocss and I was wondering if it is a bad practice to wrap your main tags in divs only for styling/page layout purposes.
I'm asking this because I see some frameworks like Twitter Bootstrap use such a method.
What are the implications of such a markup from a semantic and accessibility point of view?
For example:
<div class="container">
<div class="row">
<div class="span4">
<nav class="nav">...</nav>
</div>
<div class="span8">
...
</div>
</div>
</div>
instead of
<div class="menu">
<nav class="nav">...</nav>
...
</div>
No, it's fine. HTML is a "mark-up language", and mark-up involves styling. Besides, everyone does it. Many of the fluid multi-column layouts rest precisely on this approach.
Using unnecessary divs is not a good idea... if the HTML codes in the second box is enough to do everything that you want or need to do then don't use extra divs... secondly, HTML codes in the second box is much clear and shorter then the codes in the first box... if you keep your codes clean, short and formatted, it will help you a lot when you want or need to update your code in future...