I have created a normal Layout here → http://codepen.io/codeispoetry/pen/NpKZpN, But i want to convert or re-engineer the same thing to the bootstrap version. As I am a beginner so could not understand from where to start.
To learn how, I guess you would start by reading the Bootstrap documentation, that should explain where to start, such as what css and scripts you need to include. Then explain the grid system and classes that it uses.
If you are only doing it in Codepen, it lets you include Bootstrap in the Settings.
But this question does beg the question: Why do you want to convert this working responsive layout to Bootstrap. That doesn’t make much sense to me.
5 Likes
Hi,
The docs are the place to start and the grid system is clearly explained and documented here. Just grab some of their starter templates and play around until you become familiar with the rules and the code.
You must follow the rules exactly and you must have a good grasp of html and css before stepping into bootstrap or you will soon get overwhelmed.
For a small layout like you have constructed then bootstrap is overkill however if you are just doing it for practice then go ahead. Its just a matter of grouping rows and columns together in the right order with the right pre defined classes.
You have made a beginners fundamental mistake in your layout in that you have absolutely placed the right column and this will never work in a real site because you can never be sure that the content in the right column is never going to be taller than the main column because when it does it will simply overlap the footer.
You will virtually never use absolute positioning for columns. Bootstrap uses floats which is in itself already outdated but the newer versions of bootstrap allow flexbox which is a step in the right direction but again a slightly flawed approach as flexbox shouldn’t really be used for everything,
If you still want to learn bootstrap then I suggest you have a go on your own first and then ask questions when you get stuck and have something to show us.
2 Likes
what is the latest incarnation of float?
Float is still float, but it’s not something widely used for the layout of major page elements (it still has its uses elswhere). There are much better methods these days to place elements side by side. There are css tables, inline-blocks, flex-box and the new upcoming thing is grid.
2 Likes
I think they have some issue on some browsers.
It has some issues in Internet Explorer, but they can usually be overcome. Other than that support is pretty good now.
1 Like
Looks good sir, thanks for sharing that website. On latest version of browsers it works well.
More on that here:-
Browsers are not quite ready for it yet, but it could be a revolution in page layout.
It’s a very useful one. Type anything in the search box to see the support, Eg: grid:-
1 Like
This is an amazing information. I have bookmarked this in my Chrome Browser. 
Instead of using the float I decided to use some other CSS property, and I found one →
I used →
display: inline-block;
.floating-inline{display: inline-block;}
But the problem is that the text is not aligning in the center, vertically, as compared to the logo. what is the Fix?
Can we also make sure that the menu list items falls in the centre of that Horizontal row?
First of all, nothing is broken so there is nothing to fix. The code is rendering the page exactly the way it is written.
With that in mind, you might rephrase the question so that you describe your wishes (an image sometimes helps) and ask how to write code that fulfills your wishes.
You didn’t say what text, but I will take a guess that you are referring to the menu text. If so…
(line 50)
.floating-inline {
display: inline-block;
vertical-align: middle; /* add me */
}
I would also suggest that you give the advice that you have already received another read. If you find it too incredible, then sign up for a community college class in HTML/CSS so you will learn more about the behaviors of HTML elements and CSS properties and so you can ask questions of the instructor in real time.
I didn’t understand this? I am already signed in for Sitepoint Premium, TeamTreehouse, Tuts Plus. Do you have other recommendations.
By the way I was saying that i wanted to align the menu text
like this →
I think I mentioned community college for a couple of useful reasons to which I will add a structured lesson plan that doesn’t encourage jumping way ahead of ones skill level.
The logo appears to be left-aligned. The inline menu is centered vertically and horizontally. This is a desktop view of what will presumably be a responsive page. As shown, as the page width narrows, the menu will flow beneath the logo while there is still white space to its right as it attempts to remain centered horizontally. Tell us, what comes next and how would you accomplish it? The code that we recommend, and the planning that you should be considering, includes “what comes next”? How does that neatly centered menu and left aligned logo behave/change at narrow widths? Hint: Whatever code works satisfactorily at desktop widths will change at mobile widths.
Oh. I thought you were shouting at me, and you didn’t wanted me to post any question again. Thanks I am relieved.
I was recommending that you revisit the advice that had been given earlier in this thread.
1 Like
The grid layout doesnt seems to be very browser supportive → http://caniuse.com/#search=grid
Another resource here that has the opinion that it is in the testing pase.
Isn’t it too early to use that in commercial projects?
Or my approach is incorrect, and I am underestimating the potential of the grid layout? Please provide your opinion.
Yes, it’s too early to use that yet. I just mentioned Grid as something to watch out for and maybe learn for the future.
But flex-box is already here with reasonable support.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.