I have a classic structure of html code with bootstrap 4. i want to put a background-color in full width of panel in a col-8. here is my code :
<div class="container">
<div class="col-8">
<div class="row">
</div>
<div class="row my-panel">
<!-- i want to fill this panel with a full width background color-->
</div>
</div>
<div class="col-4">
<!-- a sticky top panel which vertically scroll with the page-->
</div>
</div>
The problem is my-panel is not on full width because the col-8 is the parent and what i want to do is to fill my-panel with a color but not only for the width of the col-8 but i want to fill 100% of the screen's width
First of all your question is not clear, but since you say you edited it I tried my best to understand the question.
Bootstrap works in a grid system. So if you set a class as col-4 it'll set up a small box (column) inside this grid to let you throw in your elements in. The rest of this row will remain empty. Furthermore, due to HTML divs works in a parent/child sense, if you add a col-8 inside a container and tried adding width:100%; (CSS) in the col-8 and expected to see a stretched container, it simply won't work.
So, you have to edit that container's css attributes. But I would suggest you make another parent div before the container and add css into it.
I think what you want to do something similar to the below image.
I've added background colours to the divs, so you might be able to understand what I've done here. Also, I believe that this way your question of adding background colours, might be answered.
Here's my code:
<body>
<div style="background-color: green;">
<div style="background-color: blue;">
<div class="container">
<div class="col-8" style="background-color: red; width: 100%;">
<div class="row" >
</div>
<div class="row my-panel">
<!-- i want to fill this panel with a full width background color -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores iusto consectetur,
aliquid laborum dicta nobis magni atque voluptatem ullam, natus deserunt, animi corrupti sunt nesciunt fugiat asperiores nam delectus quam.
</div>
</div>
</div>
</div>
<div class="col-4" style="background-color: yellow;">
<!-- a sticky top panel which vertically scroll with the page -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores iusto consectetur,
aliquid laborum dicta nobis magni atque voluptatem ullam, natus deserunt, animi corrupti sunt nesciunt fugiat asperiores nam delectus quam.
</div>
</div>
</body>
Related
I have this code
<div class="container">
<div class="row flex-nowrap" style="overflow: hidden;">
<div class="col" style="flex: 0 0 120px !important; padding-right: 0 !important;">
<h1>Title</h1>
</div>
<div class="col">
<p style="overflow: hidden; white-space: nowrap;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem commodi debitis et, exercitationem
expedita illo voluptate! Aliquam architecto atque distinctio fugit in natus officia quos! Ipsa ipsum
non quidem vitae!</p>
<div class="row">
<div class="col-6">1</div>
<div class="col-6 text-right">2</div>
</div>
</div>
</div>
</div>
The first col should have a fixed width, that's why i use flex: 0 0 120px. The p-tag has overflow:hidden and word-spacing:no-wrap to make the text only appear on 1 line, hiding any text that overflows the container. I then have a row, with 2 column's in it, to place some text in them (number 1 and number 2) at the bottom of that col, so it says 1 in the bottom left, and 2 on the bottom right.
The problem is that because the p-tag have overflow:hidden and word-spacing:no-wrap the whole parent element is overlapning the container, causing the number 2 to be invisible. See this JSfiddle
What am I doing wrong? Any way to fix this?
You need to put your overflow:hidden to parent element of your paragraph - it must be a block or inline block element with width property defined or limited somehow (by size of the parent or max-width).
https://jsfiddle.net/esr4Lvo7/
version with text-overflow: ellipsis here: https://jsfiddle.net/esr4Lvo7/1/
The page has a simple two-column Bootstrap layout:
<div class="container">
<div class="row">
<div class="col-sm">
column 1
</div>
<div class="col-sm">
column 2
</div>
</div>
</div>
Bootstrap renders the columns in the center of the window with equal-sized left and right margins.
: | column 1 | column 2 | :
The requirement is to decorate the margins (the regions between the vertical bar and the colon). Decorations are determined by -- and aligned with -- row content. Decorations are non-essential elements that the responsive layout may clip or eliminate on small-screen devices. This last bit is challenging me.
At first I thought of adding more columns, or embedding the container within another container and placing decorations in the outer container. But (of course) Bootstrap treats the "decoration" columns as essential content. When screen real-estate becomes scarce, the decorations occupy valuable space.
Is it possible to tell Bootstrap that a column is non-essential, decorative, only to be displayed as space allows?
EDIT
Ahmad Dalao asked for a screenshot. I've cobbled something together with the caveat that I am asking the question because I don't know how to get this working.
The image below is a rendering of two nested containers. The parent container is home to the left and right margins; these are the non-essential, decorative columns. The child container is home to the content columns.
<div class="container-fluid" style="background:white;margin:0;padding:0;">
<div class="row" style="margin:0;padding:0;">
<div class="col-sm-2" style="text-align:right;border: 1px solid blue;margin:0;padding:0;">
<img src="decoration-left-margin.png">
</div>
<div class="col-sm-8" style="border: 1px solid blue;margin:0;padding:0;">
<div class="container" style="border: 1px solid green;margin:0;padding:0;">
<div class="row" style="margin:0;padding:0;">
<div class="col-sm-4" style="text-align:left;border: 1px solid orange;margin:0;padding:0;">
<img src="decoration-left-content.png">
</div>
<div class="col-sm-8" style="text-align:right;border: 1px solid orange;margin:0;padding:0;">
<img src="decoration-right-content.png">
</div>
</div>
</div>
</div>
<div class="col-sm-2" style="text-align:left;border: 1px solid blue;margin:0;padding:0;">
<img src="decoration-right-margin.png">
</div>
</div>
</div>
In your example you put .col-sm on the essential columns but didn't mention how much space you want the decorative columns to take up.
If I assume the decorative columns would take up the same amount of spaces the essential columns would do, then the following structure should give you what you want:
<div class="container">
<div class="row">
<div class="decorative col-sm d-sm-block d-none"></div>
<div class="col-sm">
column 1
</div>
<div class="col-sm">
column 2
</div>
<div class="decorative col-sm d-sm-block d-none"></div>
</div>
</div>
Those 2 decorative columns won't take up any space until small break point and up.
demo: https://jsfiddle.net/davidliang2008/4j1u7q0f/16/
I approached it differently. See https://codepen.io/Mikeritteronline/pen/YzqLVmm
<div class="container-fluid">
<div class="row">
<div class="col align-self-center d-none d-md-block text-right p-0">
<img src="//placehold.it/240x48" class="pull-right" alt="">
</div>
<div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis sequi suscipit quas nisi quae impedit hic iure aperiam eligendi, nam, nesciunt quaerat dolor ipsam amet temporibus provident, eius architecto soluta?</div>
<div class="col">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum cumque veritatis eaque eius sed libero deleniti et, dignissimos ipsum. Qui quis doloremque illum saepe aspernatur autem tempora cum, reprehenderit consequatur!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptates culpa voluptatem nobis sapiente ipsum corrupti delectus, consequatur quia temporibus dolore modi quasi libero dicta ratione nostrum soluta. Obcaecati, molestias.</p>
</div>
<div class="col align-self-center d-none d-md-block text-left p-0">
<img src="//placehold.it/240x48" class="pull-left" alt="">
</div>
</div>
</div>
CSS is
.pull-right{
margin-right: -2rem;
}
.pull-left{
margin-left: -2rem;
}
I hid the decorative columns up to medium breakpoint. https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements
Then used negative margins to pull in the images. Bootstrap doesn't have a builtin utility.
I used align-self-center to center the decorator columns vertically. https://getbootstrap.com/docs/4.5/layout/grid/#vertical-alignment
I use this template for my website skin. In this section of press have two div that contain text and image.I want change position of image and text. The image placed in left side and texts placed in right side. My site skin has rtl direction.
<div class="fh5co-press-item to-animate fadeInUp animated">
<div class="fh5co-press-img" style="background-image: url(/DNN_test/Portals/_default/Skins/Crew/images/img_8.jpg)"></div>
<div class="fh5co-press-text">
<h3 class="h2 fh5co-press-title">Versatile <span class="fh5co-border"></span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eius quos similique suscipit dolorem cumque vitae qui molestias illo accusantium...</p>
<p>Learn more</p>
</div>
</div>
On .fh5co-press-img and .fh5co-press-text you can set the order property. Add the following CSS:
.fh5co-press-text {
order:2;
position: relative;
}
.fh5co-press-img {
order:1;
position: relative;
}
You are using position:absolute; for the elements, you have to add position:relative;.
I'm trying to make it so inside of this row there are two equal columns; text on the left side with an image on the right. The problem is when I set my first col as text and my second column with the image, I get what I want except once everything collapses my image is stacked below my text. I want my image to be above my text once stacked. I've tried using pull right but then my image is no longer centered once everything is stacked. How can I get my image on the right and my text on the left and have my image centered and above my text once stacked?
<div class="row">
<div class="col-lg-6">
<img src="http://placehold.it/550x350" alt="" class="img-responsive">
</div>
<div class="col-lg-6">
<div class="center-col">
<h1 class="title">header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.</p>
</div>
</div>
</div> <!-- end row -->
Looks like you have to offset the columns:
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<img src="http://placehold.it/550x350" alt="" class="img-responsive">
</div>
<div class="col-sm-6 col-sm-pull-6">
<h1 class="title">header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.</p>
</div>
</div> <!-- end row -->
And here is a jsbin for you. And a link where you can read more.
Btw. I had to use the "sm" grid because my screen is small, but I think you get the idea :) -- Good luck!
You want to use Gorm Casper good answer and use it at md size or even look at using #media to show not show different containers with a reverse set up have a look at this Fiddle.
Resize the window to see how it flows.
#media (min-width: 1200px) {
.desktop{display: block; }
.tablet{display: none; }
}
#media (max-width: 1200px) {
.desktop{display: none; }
.tablet{display: block; }
}
I have a sample html page with a list build with semantic ui.
When I try to resize my browser window a list item with bigger description makes the image smaller(screenshot).
ps. I dont have this problem with twitter bootstrap.
up
I didn't change much css just added this to custom.css
.ui.tiny.images img, .ui.tiny.image { width:30px;}
one of the items:
<div class="sixteen wide column ">
<div class="ui divided small list">
<div class="item">
<div class="image">
<img class="ui tiny image " src="examples/images/207664bebf8011e1a9f71231382044a1_7.jpg">
</div>
<div class="content">
<a class="header">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, quod, culpa voluptatem illo cupiditate error in minus eveniet ut impedit? Quo quia inventore assumenda </a>
<span class="ui mini horizontal label">6.12.2014 | Comments: 10</span>
</div>
</div>
</div>
</div>
Thanks!
.img-responsive {
width: 100%;
height: auto;
}
Is how bootstrap handles it. Consider making a similar implementation.
The problem was with the default max-width property.
it used to be max-width: 100%; by default
now I have this:
.ui.tiny.images img, .ui.tiny.image {
width:32px;
max-width: none;
}