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;
}
Related
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 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>
Im looking for help .. how can I make this box in Bootstrap with the Gridsystem?
The Box
Left centered Text and right Image like this?
The Second Question is .. how can I make that the image go to the background when the size of the Browser is smaller.. like on the Image
Image in background
Example: gumpyframework
Tried:
<div class="row text-center">
<h2>Team</h2>
<hr class="small">
<div class="row">
<div class="col-md-8">
<p>Test Text</p>
</div>
<div class="col-md-6"><img src="img/test.png" id="africaPhoto" alt="Smiley face" width="80%"> </div>
</div>
</div>
You can pretty much inspect any bootstrap website and find that html layout. You should also read the bootstrap documentation it explains how the grid system works and how to properly utilise it.
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="banner-text">
<h1 class="text-info">
Become a Surgeon!
</h1>
<p>Digital Surgeons is looking for an experienced web developer ....</p>
<button class="btn btn-info">
Apply Now
</button>
</div>
</div>
<div class="col-sm-4"><img class="hidden-xs" src="http://placehold.it/500x500" id="africaPhoto" alt="Smiley face" > </div>
</div>
</div>
To answer your second question, you can use the classes hidden-xs or hidden-sm to hide the image on smaller screen sizes likewise you can also use visible-xs to only show an element on a particular screen size you can also use custom classes such as media queries like this:
#media (max-width: 768px) {
body {
background-image:url('http://placehold.it/500x500');
}
}
JSFiddle example
Try to set the image as background-image on the whole section to properly display the image. You can move the image around using the background-position property. See the Mozilla Developer Network for more information.
.section {
background-color: red;
background-image: url('http://i.imgur.com/gowMz8A.jpg');
background-position: right center;
background-size: 30%;
background-repeat: no-repeat;
min-height: 300px;
}
.wrapper {
max-width: 70%;
margin: 0 auto;
padding: 30px 0;
}
.text {
width: 50%;
}
<section class="section">
<div class="wrapper">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum modi tenetur incidunt eveniet? Ut nesciunt ipsum, nulla nobis mollitia nemo tempora, architecto aliquid voluptatem vero maxime! Dolorem dolore natus delectus.
</div>
</div>
</section>
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; }
}