I would like to make my left sidebar stay in place when I scroll up and down. I only like the content scroll. The content is the one with the h4 Task 1 Content and is displayed on the right side.
<div class="container page">
<div ng-include="'app/components/navbar/navbar.html'"></div>
<div class="row page">
<div class="small-12 large-4 columns sidebar">
<div class="row">
<a class="medium-6 columns menu-item button">
<div class="text-center">
<i class="show-for-large-up fi-page-add></i>
<p>Task 1</p>
</div>
</a>
<a class="medium-6 columns menu-item button">
<div class="text-center">
<i class="show-for-large-up fi-page-edit"></i>
<p>Task 2</p>
</div>
</a>
</div>
</div>
<div class="small-12 large-8 columns content">
<h4>Task 1 Content</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="form-group large-6">
<p><input type="text" ng-model="someModel" class="form-control" placeholder="Enter string"></p>
</div>
</div>
</div>
</div>
Related
i want to show image next to text. But its showing below it
Here is the code
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>This is my first post</h1>
<div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
<div class="col-md-4">
<img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png" class="img-thumbnail" >
</div>
<div><a href="/blog/first-post" >Read More..</a></div>
<div class="col-md-8">
<h1>this is second post</h1>
<div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
<div class="col-md-4">
<img src="/media/post/0a61bddab956.png" class="img-thumbnail" >
</div>
<div><a href="/blog/2nd-post" >Read More..</a></div>
</div>
</div>
This is how it look like
EDIT. I copied this from view-source and some text is cut off there. Actually i am using Django jina 2 template code
{% for post in context %}
<div class="col-md-8">
<h1>{{ post.title}}</h1>
{{ post.content |truncatewords:20 | safe}}
</div>
<div class="col-md-4">
<img src="/media/{{post.image}}" class="img-thumbnail" >
</div>
<div><a href="/blog/{{post.slug}}" >Read More..</a></div>
{% endfor %}
Here is base.html file code
<div class="container">
<div class="row">
{%block content %}
{%endblock%}
</div>
</div>
I think truncatewords:20 is causing the issue.
Replacing it with truncatewords_html:20 resolved the issue
Use d-inline class on image and text.
The problem is with your HTML Code you didn't close the div of class col-md-8
Check now the code in large screen the text and image are next to each others
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>This is my first post</h1>
<div>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
</div>
<div class="col-md-4">
<img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png" class="img-thumbnail">
</div>
<div>Read More..</div>
<div class="col-md-8">
<h1>this is second post</h1>
<div>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
</div>
<div class="col-md-4">
<img src="/media/post/0a61bddab956.png" class="img-thumbnail">
</div>
<div>Read More..</div>
</div>
</div>
I think a class="row" should not hold col sum greater than 12. Reformat your code like below.
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>This is my first post</h1>
<div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
<div class="col-md-4">
<img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png" class="img-thumbnail" >
</div>
</div>
<div><a href="/blog/first-post" >Read More..</a></div>
<div class="row">
<div class="col-md-8">
<h1>this is second post</h1>
<div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
<div class="col-md-4">
<img src="/media/post/0a61bddab956.png" class="img-thumbnail" >
</div>
</div>
<div><a href="/blog/2nd-post" >Read More..</a></div>
</div>
I have a list of dynamic items, some of them may have an icon on top of it, some of them not. I need padding from top inside elements that don't have the icon and located in row where an element have the icon. Width of items is fixed, and icon height is fixed too. So the "grid" may contain different columns count depending on screen width.
Something like this:
Is it possible to make such kind of layouts? How to do it?
<div class="container">
<div class="item">
<div class="dynamic-content-1">
Lorum ipsum
</div>
</div>
<div class="item item_with-icon">
<div class="icon"></div>
<div class="dynamic-content-2">
Lorum ipsum
</div>
</div>
<div class="item">
<div class="dynamic-content-1">
Lorum ipsum
</div>
</div>
<div class="item">
<div class="dynamic-content-1">
Lorum ipsum
</div>
</div>
<div class="item">
<div class="dynamic-content-2">
Lorum ipsum
</div>
</div>
<div class="item">
<div class="dynamic-content-1">
Lorum ipsum
</div>
</div>
<div class="item">
<div class="dynamic-content-3">
Lorum ipsum
</div>
</div>
<div class="item">
<div class="dynamic-content-2">
Lorum ipsum
</div>
</div>
<div class="item item_with-icon">
<div class="icon"></div>
<div class="dynamic-content-1">
Lorum ipsum
</div>
</div>
</div>
Update
I need a solution where the blocks are stretched to the full row height. In case somebody need simple alignment as on the picture see the
Codepen
I think I understand: On rows where there are no top ("fixed height") boxes, the top padding should be removed (like in your image). There should be no gap when there is no top box in the row.
I don't believe this can be done with CSS alone. Since your elements wrap dynamically, the number of items per row will vary. CSS can't target elements in this scenario because in HTML/CSS parent containers don't know when child elements wrap.
You'll need a JavaScript solution.
I have a bit trouble with using row.
I have this:
<div class="row">
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-8 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
</div>
But I get every Lorem ipsum under each other, not beside. How can I resolve this?
I suspect you might have been using mark-up suitable for either the legacy 'float' or 'flex' grid system whilst Foundation 6's default enabled is 'XY grid'. Thus, the mark-up is different and would cause your columns to stack.
Float/flex grid mark-up
<div class="row">
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-8 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
</div>
You can continue to to use 'float' or 'flex' grids but need to specify which you're using in the project. Or, if you want to use the newer 'XY grid', you can modify your mark-up like so.
XY grid mark-up
<div class="grid-x grid-margin-x">
<div class="cell large-2 medium-12 small-12">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="cell large-8 medium-12 small-12">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="cell large-2 medium-12 small-12">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
</div>
i want to change the orientation of the col in small screen so i took the help of bootstrap Responsive utilities
<div class="row">
<div class="col-md-4 hidden-sm hidden-xs">
<h3>News title will go here with short description</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
Read more <span class="read-more-btn-symbol">»</span>
</div>
<div class="col-md-8 hidden-sm hidden-xs ">
<img class="img-responsive" src="images/mid2.jpg">
</div>
<div class="col-md-8 visible-sm visible-xs">
<img class="img-responsive" src="images/mid2.jpg">
</div>
<div class="col-md-4 visible-sm visible-xs ">
<h3>News title will go here with short description</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
Read more <span class="read-more-btn-symbol">»</span>
</div>
</div><hr>
but i dont want to write the same line twice and add different responsive classes ?
how do i fix this without writing the same thing twice
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-8">b</div>
<div class="col-md-8">b</div>
<div class="col-md-4">a</div>
</div><hr>
I try it with the last version of bootstrap and it works.
But I prefer work in separate divs with class="row".
You can add classes in the same line like this--
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4 hidden-sm hidden-xs"></div>
Then wrap all the div's inside it
Hope this helps!
I am looking to create a page in my Joomla Template where I will have 2 columns that will take up 50% of the page showing an image and text underneath. My code is shown below:
<div id="services" class="span12">
<div id="services-img-new" class="span6"></div>
<div id="services-img-new" class="span6"></div>
</div>
<div id="services" class="span12">
<div id="services-text" class="span6">
<h4>Heading 1</h4>
<p>Lorem ipsum dolor</p>
</div>
<div id="services-text" class="span6">
<h4>Heading 2</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
The problem I have is that if the screen size is reduced then this doesnt show the correct text under the right image and from my code i can see this is obviously because i have grouped the 2 images together and the text together.
How am i able to group the image and text together as one?
If somebody could please advise, would really appreciate it.
Btw I am currently using Joomla 3.5.1 and Twitter Bootstrap 2.3.2 hence not using the col classes as it is in Bootstrap 3.
Ok, so if I understand correctly your looking for something like this:
<div id="services" class="span6">
<div id="services-img-new" class="span12"></div>
<div id="services-text" class="span12">
<h4>Heading 1</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div id="services" class="span6">
<div id="services-img-new" class="span12"></div>
<div id="services-text" class="span">
<h4>Heading 2</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
Link to jsbin example