I am trying to split a row in two, for text and an image. However, no matter what I set the size of my divs, they display on separate lines.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<ul class="nav">
<li><a class="home" href="#home>">Home</a><li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-6" id="first">JUSDHFLKSADHFLK</div>
<div class="col-md-6" id="second">JKSDNF,ASDNF,ASD</div>
</div>
</div>
I have agonized over this simple issue and checked the documentation closely. Am I missing something simple?
The code is written using codepen.io
There is no CSS and the width is large enough for col-md
Thank you
set your desired width with display:inline-block; which will make your div to exactly take the width what you gave
If your bootstrap is loading correctly, you may be loading it on a screen too small for col-md-6. Here is a working example using col-xs-6 so you can see them working side by side --> https://jsfiddle.net/mmcshinsky/kgb52j3e/
I forgot to include the external CSS for bootstrap in the codepen settings :)
Thanks for the help!
Related
I'm currently building my first website in bootstrap 4, and I have some general questions to either which I can't find a good response to or want to know how to handle something... Here it goes:
Is it common to use multiple container styles throughout a website? I mean is it perfectly okay to have a 'container'in one place and 'container-fluid' elsewhere?
Additionally, I created something very small to see how things would work out. Boostrap provides a class called 'text-md-right' and from what I can tell it should right align the text. Let me show my sample code. Why is the text in my 'bg-success' not right-aligning?
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="min-height: 0.5rem; background-color: #FBB040"></div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #939598"> </div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #D1D3D4"> </div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #28AB9E"> </div>
</div>
<div id="outter-div" class="row">
<div id="inner-div-1-logo" class="col-md-3 test"><img src="images/logo.png" class="mx-auto d-block" alt="helloworld" style="width:200px"></div>
<div id="inner-div-1" class="col-md-8">
<div class="row contact-bar text-md-right bg-success"> hello world -- needs to be right-aligned</div>
<!--<div id="contact-bar" class="row bg-success contact-bar"> Call Us # (888) 888-8888 | info#email.com | Customer Portal </div> -->
<div id="nav-bar" class="row nav-bar bg-primary"> nav-bar </div>
</div>
</div>
</div>
I'd love hear some feedback on the approach I am taking to building this based on the code above. Am I headed in the correct direction here? Anything you would do different?
Thank you.
Please use below link to read about Grid System Rules.
Visit https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
After reading the rules you can get started with building your own Html pages using examples given in below link
https://getbootstrap.com/docs/4.0/examples/
Is it common to use multiple container styles throughout a website? I mean is it perfectly okay to have a 'container'in one place and 'container-fluid' elsewhere?
It depends on you. You can use .container and .container-fluid according to your needs. But you can not use in the order shown .container > .row > .column > .container-fluid.
Additionally, I created something very small to see how things would work out. Boostrap provides a class called 'text-md-right' and from what I can tell it should right-align the text. Let me show my sample code. Why is the text in my 'bg-success' not right-aligning?
Yes it'll be aligning right on medium devices only. If you want it for other devices just use .text-right
For reference go through this link https://getbootstrap.com/docs/4.0/layout/grid/
Why is the fluid-container overlapping like that, but others don't?
Is that correct, or am I missing something? Looks wrong to me.
<nav class="nav flex-column float-left">
{links}
</nav>
<div class="container-fluid"><!-- overlapping -->
<div class="row"><!-- fine -->
<div class="col"><!-- fine -->
<main role="main"><!-- fine -->
{content}
</main>
</div>
</div>
</div>
https://jsfiddle.net/w3LwwxL7/
Edit: Just for you to know: I want to achieve a static left sidebar/nav with a fixed width (see image). Everything on the right is main content. That's why I didn't used col-1 (nav) and col-11 (main). Hope this helps :-)
Give your sidenav a fixed width and set a padding-left (same amount of sidebar width)
Here is an example:
https://jsfiddle.net/w3LwwxL7/3/
Am beginner in coding. I have designed a landing page. The landing page looks fine in website but divisions are overlapping in mobile. Kindly check and advice how to resolve this problem?
Landing Page Link
Thanks in advance
You have an inline height of 3px on your ul id="grids".
Remove that or set it to auto and its should stack properly.
you are using bootstrap the columns must wrap with row class and row should be warped in container or container-fluid classses
<div class="container">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
OR
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>
</div>
</div>
change bootstrap nav use this one [http://getbootstrap.com/examples/navbar/ ] it's batter to responsive and mobile devices .
I'm trying to set up a two-column layout - The left column is a list of items and the 2nd column is the details about an item in the first column (click on the item and the data renders, but that's not important right now).
I'm getting stuck setting up the layout - I can get the columns going, but when I add the list into the first column, it's rendering below it. And I'm not sure why.
Can someone point me in the right direction?
<body>
<div id="content">
<div class="row">
<div id="sidebar" class="col-md-4">
<div class="list-group">
<a class="list-group-item">Item Here</a>
<a class="list-group-item">Item Here</a>
</div>
</div>
<div id="main" class="col-md-8">
Other Stuff Here
</div>
</div>
</div>
</body>
I've tried removing the parent div (id="sidebar") and making that ID/width part of the list-group div, but then id="main" renders above the list.
So, I'm confused. What am I missing?
if you use col-md, your div have 100% width when your browser width is below < 768px, it's a behavior on mobile first css grid, so change col-md by col-xs for have your result for any device size
I need to divide the browser window into two fluid rows so that regardless of size, they are stretched across the screen. In the first row i need to add different columns which should be centered automatically. Basically it looks like this:
The problem is that I can not center cols in first row and rows are not stretch to the browser height. My code looks like this:
<div class="container-fluid">
<div class="row" style="text-align:center">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-3">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
</div>
</div>
You can use offset to center div
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-3 col-md-3">.col-md-1</div>
<div class="col-md-3">.col-md-1</div>
</div>
</div>
And you can change padding for ajust space between blocs.
See on fiddle http://jsfiddle.net/JtzE6/
Also take a look at the Alignment Classes on twitter bootstrap documentation (Twitter Bootstrap Documentation). You should be able to apply these to any element tag in html. It worked for me.. Hope this helps..