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.
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 probably an easy one, but I'm new to bootstrap and aren't quite familiar with how it works. I have the following code to create 4 even-width columns in a row. But it keeps showing up as 4 vertically stacked columns on my laptop (1920x1080) and I'm not quite sure where I'm doing it wrong.
<div class="container">
<div class="row-fluid">
<div class="col-md-3"><!--about us feature 1st -->
<div class="about-block">
<div class="heading">
<h6>AVAILABILITY</h6>
<p>Fast Response Time<br> 15 Minutes Setup</p>
</div>
</div>
</div><!--about us feature 1st closed -->
<div class="col-md-3"><!--about us feature 2nd -->
<div class="about-block">
<div class="heading">
<h6>SPEED</h6>
<p>Average 7x Faster<br> Complete Data Coverage</p>
</div>
</div>
</div> <!--about us feature 2nd closed -->
<div class="col-md-3"><!--about us feature 3rd -->
<div class="about-block">
<div class="heading">
<h6>SAFETY</h6>
<p>Reduce Human Risk<br> No Scaffolding</p>
</div>
</div>
</div><!--about us feature 3rd closed -->
<div class="col-md-3"><!--about us feature 4th -->
<div class="about-block">
<div class="heading">
<h6>COST SAVINGS</h6>
<p>Targeted Repairs<br> Less Outage Time</p>
</div>
</div>
</div><!--about us feature 4th closed -->
</div>
</div>
UPDATE Added screenshot:
Use col-sm-3 instead, or make your <div> element wider. If you are using a container directly inside body, you shouldn't have any problem. If you are using inside another element, make sure it is wide enough.
First, try changing row-fluid class to style="float: left". Second, it is true that (in theory) the screen is divided into 12, but 3*4 might be more than 12 (margin, border, etc.). If the first part renders three columns and the 4th underneath, try reducing the size of the columns by setting, for instance, width=24%.
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'm somewhat new to Bootstrap 3 so forgive me if this seems far to obvious.
I've created a jsfiddle to start things off with which will hopefully help understand what I'm trying to ask: http://jsfiddle.net/dwdhj/2/
<div class="container">
<div class="row">
<div class="col-sm-8">
8
<div class="row">
<div class="col-sm-4">
4 - but want to appear as 6
</div>
<div class="col-sm-4">
4 - but want to appear as 6
</div>
</div>
</div>
<div class="col-sm-4">
4 - full height of screen
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
When a designer uses a grid - lets say from http://gridpak.com/ - they will stick to that throughout the whole design. If they were to create a right hand panel to be the full height of the screen it would take up perhaps 4 grids. This leaves us with 8 - good math I know.
My issue: If I create a new row inside that initial 8 - so that I can make everything in that container nice and fluid - it is essentially creating another 12 column grid. This new 12 column grid won't actually match up to the grid the designer was originally working from.
My Question: Can I make it so the grid remains the same within the initial 8 column div I used - so I can only use a maximum of 8 columns, or is there something else I should be doing here? Perhaps its something the designer needs to be doing?
I did see some examples of this with row-fluid on Bootstrap 2 but that has been done away with - for good reasons from what I've read.
Hopefully that has made enough sense - let me know if anything needs clarifying.
After doing some more research I found that a combination of using push/pull I was able to get the result I was after.
Review the updated jsfiddle link http://jsfiddle.net/dwdhj/3/
<div class="container">
<div class="row">
<div class="col-sm-12">
Header
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-push-8">
4 - full height of screen
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="col-sm-8 col-sm-pull-4">
8
</div>
<div class="col-sm-4 col-sm-pull-4">
4
</div>
<div class="col-sm-4 col-sm-pull-4">
4
</div>
<div class="col-sm-4 col-sm-pull-4">
4
</div>
<div class="col-sm-4 col-sm-pull-4">
4
</div>
<div class="col-sm-3 col-sm-pull-4">
3
</div>
<div class="col-sm-2 col-sm-pull-4">
2
</div>
<div class="col-sm-3 col-sm-pull-4">
3
</div>
</div>
<div class="row">
<div class="col-sm-12">
Footer
</div>
</div>
</div>
Essentially my trouble was creating new rows all the time when what I needed to do was keep adding them next to each other and then when they reach the "sidebar" I add a "push" in to wrap it down to where the next "row" would have started.
Happy to be advised on a better way of doing this but it works for now.
I answered this back on my comments thread, essentially I took a different approach
http://jsfiddle.net/Yjn9V/1/
<div class="container">
<div class="row">
<div class="col-sm-12">Header</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-push-8">4 full height
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="col-sm-8 col-sm-pull-4">
<div class="row">
<div class="col-sm-12">12</div>
</div>
<div class="row">
<div class="col-sm-6">6</div>
<div class="col-sm-6">6</div>
</div>
<div class="row">
<div class="col-sm-6">6</div>
<div class="col-sm-6">6</div>
</div>
<div class="row">
<div class="col-sm-5">5</div>
<div class="col-sm-2">2</div>
<div class="col-sm-5">3</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">footer</div>
</div>
</div>
I would try this, as you're doing way too much push/pull on things where you could just do it once on a wrapper container, as you have a very simple layout.
Check it out, let me know here or back on my comments thread if this works or if you have quesitons.
I had the exact same problem as you. I came up with a solution that is either implemented with pure CSS (compiled SCSS, that is), hard-coded, or javascript - I put both of them below.
The idea for is the following: you have the percentage width of a div A in terms of the container and want to know the percentage for div B, which is descendent of A. There's an easy calculation you can do to figure out the percentage of div B in terms of the container - B/A*100, if I'm not mistaken. The calculation itself is in the comment of the CSS version (link to gist is below).
Please note that, for this to work, divs that descend from A and contain B shouldn't modify the width (much like bootstrap itself).
Solution based on CSS (SCSS, to be exact), that only accepts two levels of grid:
https://gist.github.com/royalsflush/8403942
Here I just loop through the possibilities of parent and child (hence the limitation of two levels).
And a JS solution that uses the calculations I did for the first solution and a tree traversal to adjust all the nested components of the grid.
demo: http://bootply.com/105852
and source: https://gist.github.com/royalsflush/8422780
For this, I used the same idea as the CSS solution, except I use recursion on it. Let me give an example to clarify: suppose you have A and B again, and also a div C, that descends from B. If you perform the calculation I stated above for B, you will have B in terms of the container and C in terms of B, which is the exact same situation we were with A and B. Hope that is clear, not my best explanation.
Both have a demo and plenty of comments, but please let me know if you need further clarification.
Hope it helps!