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>
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
For some reason, bootstrap is only allowing me to use the "col-sm" class. If I enter anything else into my code, including the "xs" class, the columns are stacked on top of one another. This is my code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<div class="well">something here</div>
</div>
<div class="col-xs-3">
<div class="well">something here</div>
</div>
</div>
</div>
I have ensured that the appropriate CSS, JS, and jQuery files are linked (hence why the "col-sm" class works), and only have my own personal CSS style-sheet linked in addition to them (which does not predefine any width or height for any element). Furthermore, I am viewing my work on the latest version of Mozilla Firefox.
Edit: I have closed the div with the class "fluid-container", it still produces the same problem. That is, instead of the two columns appearing on the same row, the two columns are stacked on top of one another. For some reason, the only class that works is "col-sm"--any other class, including the "xs", just lines the columns atop of one another.
Your code is correct only the thing u missed out is the last '>' closing of div tag.
replace:
<div class="container-fluid"
with:
<div class="container-fluid">
Please fix your div first <div class="container-fluid" missing >
See below corrected format
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<div class="well">something here</div>
</div>
<div class="col-xs-3">
<div class="well">something here</div>
</div>
</div>
</div>
Use the latest stable version 3.7.7 of bootstrap and this problem will be solved. You can download it from here. If you don't want to use the newest version, you can try to use col-sm-9 instead of col-xs-9 and col-sm-3 instead of col-xs-3, it will also solve the problem.
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.
I started to use Twitter bootstrap for this application that I am working on.
I read the documentation about nesting rows in both fixed grid system and in fluid one.
Now, I want to do something like this
So of course I could do something like this
<div class="container">
<div class="row">
<div class="span 12">red</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
</div>
and I think I would get what I want. But I am wondering what are the consequences of doing
<div class="container">
<div class="row">
<div class="span 12">red</div>
</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
I don't see any difference now in my browser but I am wondering what will happen if I include multiple row elements in single container tag. Is the row-nesting the only proper way to create something like I showed? What is the difference between those two implementations of my design, so to speak?
The second version is more correct. But both work. The difference is how it responds when the page is re-sized. The second version will shrink and react better
However if you want the containers to match the above image you need to use class="container-fluid" and class="row-fluid"
Also remove the spaces between the spans and numbers
class="span 3"
Should say
class="span3"