Folks,
I'm having trouble on my website:
http://clubedebeneficiosunilife.com.br/
There is a section 'Destaques' thumbs with 16 images and a 'Saiba mais' button for each of the 16.
When I open the site on a monitor 15, 17, 19 inches is all normal. OK!
When I open in a cell phone, it's also good. The bootstrap works fine and the 16 thumbs that before were 4x4 ... pass to 2x8 to fit the smaller cell screen:
Like this link:
http://mobiletest.me/iphone_5_emulator/?u=http://clubedebeneficiosunilife.com.br
It is so perfect.
My problem is when I open a tablet:
http://mobiletest.me/ipad_mini_emulator/?u=http://clubedebeneficiosunilife.com.br
The section 'Destaques' is displaying thumbs in 2x8 (is correct), but note that is extrapolating the container with white background that he should stay inside.
How can I fix the CSS so that the resolution of the tablet does not occur this problem?
I do not have much experience, and I'm with a lot of difficulties in solving this.
Thanks in advance.
You should be really using container-fluid class instead of container, as the latter has a fixed width and when you place fixed width container within fixed width container it will overflow because of all the paddings, where as container-fluid is set to 100%
<div class="container-fluid">
<h2 class="left">Destaques</h2>
...
</div>
Demonstration of problem:
.container, .container-fluid {
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>.container</h1>
<div class="container">
<h2>.container</h2>
<div class="container">
<h3>.container</h3>
</div>
</div>
</div>
<hr>
<div class="container">
<h1>.container</h1>
<div class="container-fluid">
<h2>.container-fluid</h2>
<div class="container-fluid">
<h3>.container-fluid</h3>
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/8tkLtjya/
Related
Hi I feel dumb for asking the following but im at a loss. I am trying to create the following layout for a website but have not been able to create exactly what I want. I know it should be very simple to do but I'm a developer not a UI / UX wizard.
So im looking to have a side bar on the left with menu items, a top nav (fixed to the top of the page) and a footer fixed to the bottom of the page with the main body of the site scrolling within the area left between the top nav and footer.
There are also pages where I would like the content in the main body to be vertically and horizontally aligned (form input)
Ideally im looking to use bootstrap 5.2 but am not against using css grids or whatever magical methods there may be to get to what im looking to do. I'm also looking to try and make this all responsive hence starting to use Bootstrap I didn't want to have to implement my own media queries to do it.
Thanks in advance for any help or suggestions, I have been hitting my head against a brick wall with this for far too long and thought I would reach out and see if anyone was able to help.
You have two distinct columns, (1) sidebar and (2) everything else.
Within the main row, we can form the two columns: col-2 and col-10, with the first acting as our sidebar and the other acting as our main column.
In the main column, we add a row and then add to it the nav, main content and footers.
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2 bg-dark text-light">
sidebar
</div>
<div class="col-10 bg-light">
<div class="row h-100">
<div class="col-12 bg-primary nav">
nav
</div>
<div class="col-12 main">
<p>1</p>
<div style="height: 5000px;">a</div>
<p>2</p>
</div>
<div class="col-12 bg-primary footer">
footer
</div>
</div>
</div>
</div>
</div>
In the CSS we set the height for the nav and footer, and then use calc() to measure the height our main content should be and set the overflow to scroll to get the scrollbar if the content is larger than the height.
.nav {
height: 60px;
}
.main {
height: calc(100vh - 120px);
background: #f1f1f1;
overflow: scroll;
}
.footer {
height: 60px;
}
I'm learning Bootstrap and I want to create simple div which is centered on the page.
I really like that auto-margin of container class, but it seems to be jump-changing based on breakpoints when resizing window width.
I want to make margins getting smaller smoothly until they become 0 when window is small enough.
I have tried to explicitly set one column layout like this:
<div class="container border">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
but the results are just the same and breakpoints all still used.
For that you shouldn't use bootstrap containers, because they have fixed width on breakpoints. For smooth transition you should manually set width to you container in % or vw and margin in same units.
There are two types of Bootstrap 4 Container: Fixed and Fluid.
Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
If you don't want the breakpoints, use the container-fluid class:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid border">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
If you must, you can manually override Bootstrap's responsive max-width settings.
.container.nobreakpoints {
max-width:100%;
width:800px; /* maximum width before margins appear */
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container border nobreakpoints">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
Done this a whole bunch of times, but now it's acting out for some reason. Though I'll probably feel very dumb, after somebody points out the mistake.
Live link:
http://soloveich.com/project6
I'm trying to build a header, but getting quite a few problems at the same time
1) Background images for class header and #soc don't show
2) that image with large text does not align to center
3) I get the post on the right side of the header, while it has to be under it.
css is properly connected (tried changing body background color)
header code
<div class="header">
<header>
<div class="row-fluid">
<div class="col-lg-3"><div class="pull-right"><img src="wp-content/themes/greendream/images/logo.png"> </div></div>
<div class="col-lg-6"><div id="text"><img src="wp-content/themes/greendream/images/text.png"></div></div>
<div class="col-lg-3"><div id="soc"></div></div>
</div>
</header>
</div>
css
.header {
background-image: url(images/hdbg.jpg);
}
#text {
width: 578px;
margin:o auto;
}
#soc {
background-image: url(images/soc.png);
}
You need to start by studying how the grid system in Bootstrap 3 works.
Basically, if you want your content centered, you need to place it in a container. Then you set up your rows and columns.
Something like this:
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="wp-content/themes/greendream/images/logo.png">
</div>
<div class="col-md-6">
<img src="wp-content/themes/greendream/images/text.png">
</div>
</div>
</div>
</body>
Note: There is no row-fluid in Bootstrap 3. A lot of what you're trying to do will only work in Bootstrap 2.
I am trying to make a message bubble, and I've got it working on all browsers with exception to IE7. The bubble needs to wrap itself around variable width content, so it's width will depend on the amount of content. It may grow to 100%, but it may only be 100px wide if the message is short. This is where I'm running into problems with IE.
Here's a jsfiddle: http://jsfiddle.net/w9Vdh/
The main construct of the bubble is a top row, middle row and bottom row. I've got a sprite and a couple other background images that I use render the graphics. Here's the HTML:
<div class="thread-item-wrapper">
<div class="thread-item-horiz thread-item-top">
<div class="thread-item-corner thread-item-topleft"></div>
<div class="thread-item-corner thread-item-topright"></div>
</div>
<div class="thread-item-middle">
<div class="thread-item-content-wrapper">
<div class="thread-item-label">You:</div>
<div class="thread-item-content">
<div class="thread-item-msg">
<div class="thread-item-content-top"></div>
<p>Message</p>
</div>
</div>
</div>
</div>
<div class="thread-item-horiz thread-item-bottom">
<div class="thread-item-corner thread-item-bottomleft"></div>
<div class="thread-item-corner thread-item-bottomright"></div>
</div>
<div class="thread-item-date">Aug 18, 2011 12:01 PM</div>
</div>
Here's what it's supposed to look like:
And here's what it looks like in IE7:
see the fiddle for code and demo-
Fiddle: http://jsfiddle.net/w9Vdh/6
Demo: http://jsfiddle.net/w9Vdh/6/embedded/result/
screen shot of IE7:
Updated fiddle for sent bubble fix for IE7
Fiddle : http://jsfiddle.net/8NpwH/2/
Demo: http://jsfiddle.net/8NpwH/2/embedded/result/
Changes in code html:
<div class="thread-item-clear"> </div>
<div class="thread-item-date"><div style="text-align:right;">Mar 23, 2012 12:41 PM</div></div>
Css:
.thread-item-sent .thread-item-date {/*clear:left; float:right;*/ margin:0px 4px 0 15px; } /* <--- this line --- */
"Received messages" work... the bubble wraps to the message width nicely. However, sent messages are being displayed full-width, and not sizing correctly to the message width. This has something to do with the date. In my fiddle (jsfiddle.net/8NpwH) you'll see a comment in the CSS on the .thread-item-sent .thread-item-date style, which indicates the CSS that appears to be the problem. If you get rid of that CSS, the bubble sizes correctly, but the date is missing.