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
Related
Its been a while since I am trying to build a basic template having header, footer, left panel and main section using bootstrap, but I found bootstrap documentation is pretty vague and hard to figure out the actual html template for my requiremnt, especially for newbie like me. Can someone has any basic template using bootstrap like the image below.
Using this boostrap grid generator: http://shoelace.io/. I've added classes to the divs so you know which one is which.
<div class="container">
<div class="row header">
<div class="header col-sm-10"></div>
</div>
<div class="row content">
<div class="nav col-sm-3"></div>
<div class="main col-sm-7"></div>
</div>
<div class="row footer">
<div class="footer col-sm-10"></div>
</div>
</div>
As #Mech suggested the link http://shoelace.io/ has an interface where we can customize our basic layout of an html page. First design the the header/footer/Main section in this util page (All you need to do is simply select the column and drag it as per the size of the section you are designing for). Dynamically the html content will be generated as you design it.
For my site I am trying to include masonry to get content to lay out nicely but I am getting very odd results so far. Here is my code:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm news-box" style="background-color:#color"
data-masonry='{ "columnWidth": ".masonry-container", "itemSelector": ".masonry-container" }'>
<div class="masonry-container">
<div class="contain">
<img src="#w.Image" class="image img-responsive" />
<div class="middle">
#getReferrals(w.Id)
</div>
</div>
<h4>#w.Title</h4>
<p>#w.Body</p>
</div>
</div>
As you can see the outer is the one that has the masonry quality. I am not using jquery because I can't get it working, HTML at least gives me (wrong) results. Anyways, the result is this holy mess:
Something else: this content is inside bootstrap tabs. I tested it outside of them and it worked just fine but inside it's giving me problems.
Please help me if you can! Thanks in advance....
Whenever using masonry just make sure you are putting the rules at the row level and aiming for the columns, if not the layout will be odd.
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!
This is my html right now. Whenever I view it on a smaller screen, rather than appearing on the far right like it should according to the col, it appears in the center of the screen.
<div class='row visible-xs-block'>
<div class='col-xs-2 col-xs-offset-10'>
<h3>DFA Rice Blog</h3>
<h4>Archive</h4>
</div>
</div>
I'm looking for a way to fix this issue
Like it was suggested by Shawn, it's best to just use pull right and set your column the length you want instead of trying to play with an offset. Something like this should work perfectly:
<div class='row visible-xs-block'>
<div class='col-xs-12'>
<div class="pull-right">
<h3>DFA Rice Blog</h3>
<h4>Archive</h4>
</div>
</div>
</div>
I have some segments that are similar on my page, same setup - one icon-logo and one text-area:
<div class="row-fluid">
<div class="span7">
<img src="img/icon2.png" alt="" />
</div>
<div class="span4">
<h6>My Text Area</h6>
<p>Description of that functionality<br>
Multi lines of text<p>
</div>
</div>
Just basically an icon and a description text, started out with having 2 of these which is alright, now there is 8 and i think i would like to gather it in one segment, but then slide between the 8 icons/descriptions.
So my question is, any chance or any component available where i can put in 8 of these in a slider-effect way ? most sliders I've looked at is image sliders, but since i need to have multi-language i don't want to convert the 2 spans into 1 image.
I am not an expert in web development so an example would really be appreciated if its possible.
You can use bootstrap carousel for this.
This is the markup they expect
<div class="carousel-inner">
<div class="active item">[here]</div>
<div class="item">[here]</div>
<div class="item">[here]</div>
</div>
All you need to do is to have your two spans inside the element with class item.
Check this fiddle. Hope this is what you wanted.