I am new to bootstrap 3. I am designing a page and my content requires more width. While the menu bar extends out to the sides of the browser, how can I can a bit more width for my content. I have tried changing container to container-fluid but it doesn't change anything.
Here is the code. I have 2 files, namely, cc-top-min.blade.php and show.blade.php. show.blade.php is sucked into cc-top-min.blade.php #content. http://pastebin.com/gLQc0ADP
Here is a screen shot. New more width. WOuld like to extend the content of the page to "almost" as wide as the navbar. Please help.
here is the html: http://pastebin.com/7Q4emw6j
Consider this post: Fluid Container in Bootstrap 3. Your navbar extends because it is not wrapped in a .container.
Therefore, you can just omit the .container and start with a row. To narrow it down as you want, add some padding as you see fit.
If container-fluid is not working at all; are you using bootstrap 3.1 or above as the first one didnt include it: Container-fluid vs .container
You need to replace container with container-fluid everywhere you've used it. See example: http://www.bootply.com/O7YjWCvRa8
Related
I've been screwing around with a test website. I'm using bootstrap and know you should put everything into a container div, which gives everything inside a padding or margin?
I'm fine with that but wanted to have a carousel that takes up the full width of the viewport instead of having the space around it at the top. How do I do this?
I could just put it outside of the container, but I heard you shouldn't do this, and I need to have a nav bar on top that's inside the container so I think overall that's not a good idea.
What way could I achieve this while following "good practices"?
Any help appreciated, thanks!
Try using a div with class container-fluid instead of container. The container-fluid takes up the whole width of viewport available.
I have a simple site a guy made me using bootstrap. But it has a wide gutter on both sides, and I want to remove that, so the site will stretch from one side to the other.
I tried to do this by editing the css file, specifically the container size for each monitor size, and the padding (default is 15 px on both side).
This did make is slightly wider, but only slightly. Can anyone tell me what part of the css I can edit to do this? The gutters are a bit too wide for me!
Any help is greatly appreciated!
If the content is surrounded by a div with container class, try to change it to container-fluid
Bootstrap doc
Bootstrap 2.3.2 doc
Turn any fixed-width grid layout into a full-width layout by changing
your outermost .container to .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
FIRST ISSUE:
Let's say I have a section in my website where I want to break the width of the container 1200px width. In this section I need to position an image on the very left side of the browser screen and on the right side some text.
I assume that in order to make this I have to use container-fluid and I'm using it like this:
<div class="container-fluid">
<div class="row">
<div> HERE IS THE CONTENT FOR IMAGE AND TEXT </div>
</div>
</div>
When I check this in the browser:
It appears an horizontal scrollbar and I have to remove the negative margins of the .row class in order to get rid of the scrollbar.
Is this the normal way of doing this?
SECOND ISSUE:
Let's say I want to create a section where I want to have a full width background color and the content to be withing the default bootstrap grid width of 1200px.
Is it necessary to create an container-fluid in order to do this? Or is better just to create an extra div an add there the background color ?
In Bootstrap, the grid is defined by three components: the container, the row and the column(s). The container comes in two flavors: container, which sets the max-width of the container for each of the specific breakpoints defined in Bootstrap and centers the container within the viewport; and the container-fluid, which simply sets the width to 100% of the viewport display. Both the containers set the padding to 15px.
The purpose of the row is to contain the columns which float left by default, so it will automatically clear the float. It has a -15px margin to negate the padding added by the container.
The columns go inside your rows. Columns are based on a grid of 12. If you only need one column at the x-small breakpoint and up, then add one col-xs-12. Want two equal columns at that viewport width, add two col-xs-6. Columns have 15px of padding left and right, so there are always consistent gutters.
The row margins negating the container width may sound useless, but it's important and very clever, because it allows you to nest rows and columns inside other columns allowing you to create an endless combination of grid divisions.
So, your issue is that you're not using the grid the way it is designed. You must have at least one column inside a row inside a container.
In bootstrap you need the following structure:
<div class="container-fluid">
<div class="row">
<div class="col-xx-xx">
...content goes here...
</div>
</div>
</div>
The reason of this structure is that the container will try to grab and center the content, in the case of the .container-fluid, it grabs 100% width columns instead of the traditional ~960ish pixels that has been used.
The row will allow you to allocate 12 columns of content in the order you decide, which is the next div.
The class .col-xx-xx will allow you to specify the breaking point of that column, lg for large devices, md for medium devices sm and xs for mobile/tablet devices.
The second dual xx in .col-xx-xx will allow you to specify how many of the 12 columns you're going to take in that container. For Example, .col-lg-3 Will be a column who's breaking point is as large device (1200px or so) and it will take 3 column spaces.
So it is necessary to use the structure above, else you will have that scrollbar on the x-axis bothering.
EDIT
As for your second problem, it is really necessary that you use the structure given above in the code, you want it to be full width? that means, no margins and paddings, I have a small trick for that that I have been using for a while now, I'll explain it below:
Use a container with the class of jumbotron as follows:
<div class="jumbotron my-own-jumbotron">
...content goes here
<div>
Since the jumbotron es designed to be responsive, it will act as a responsive container. on the next class, .my-own-jumbotron specify the background image or color you want for it, and depending on the content you add to it, it will adjust the size of it. I don't know if that's the solution you're looking for, but here's a demo:
https://www.hsoto.me/00295134567891srgsrgsrht36erdrbd5ye546/ipotra/
The third div will be a jumbotron with a custom background-image that expands as needed, and you can resize it and view it on a mobile device, and it is complete responsive, and full width.
I found that this way, it is not necessary to use the .container-fluid div.
I've been playing with bootstrap 3 and I noticed that if you use the Grid System without a container it becomes fluid, someone told me I shouldn't do that because the system was design to be within a container. What happens if I don't use the container class?, do I need it?, if so could I make the container class width 100% without messing up bootstrap's media-queries, or is there any other or better way to build a fluid layout with bootstrap 3.
Update Bootstrap 4
Outermost rows should also be wrapping in container or container-fluid in Bootstrap 4 to prevent horizontal scolling caused by negative margins on the .row.
Bootstrap 3
You should wrap row in container or you'll have a problem with the negative margins that BS 3 uses for the row element. Basically the row is designed to be within a container. Read more on the Bootstrap grid
Play with this example on Bootply: http://bootply.com/83751
According to the latest documentation:
https://getbootstrap.com/docs/5.1/layout/gutters/#no-gutters
it is reasonable to drop the outer container (or at least its css class assignment):
Need an edge-to-edge design? Drop the parent .container or
.container-fluid.
This appears to have been in the documentation since the 4.0 release: https://getbootstrap.com/docs/4.0/layout/grid/
I think you need it.
Without the container it kind a works - but it shows a horizontal scroll bar at the bottom of the page and around 20px are cut off from rightside of the screen.
See yourself how it works without the container class - just go to http://getbootstrap.com/ and remove the container class using inspect element.
Just use the container-fluid class instead of the container class.
class="container-fluid" will allow you to use full width.
I found a simple web site design example using DIVs at the following link:
http://www.htmlgoodies.com/img/3_column.html
The problem with this design is that it is a fixed width. I need a design where the wrapper DIV expands to the full screen area (100% width) and the header, main and footer DIVs resize along with it.
If I set the wrapper and footer widths to 100% it does take up the full area on a maximized browser window but shortening the window causes the right and main DIVs to wrap downwards. How can this wrapping be prevented?
I'm not sure if this is the answer you are looking for but surly using float:right or float:left on the div that is wraping under another div should fix the problem?
I recommend looking into using fluid960gs
Cant be done, only one attribute for DIV, which is the align attribute. Maybe consider using tables: http://www.w3schools.com/html/html_tables.asp
Shadowpat