Achieving consistent alignment of items on smaller screen sizes using Bootstrap

I'm facing some challenges while creating a website using Bootstrap. I've encountered an issue where the columns in a row stack on top of each other when the screen size is reduced.

Here is my current code:

<div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4"><center>Feed</center></div>
        <div class="col-xs-4 col-sm-4 col-md-4"><center>Tutor</center></div>
        <div class="col-xs-4 col-sm-4 col-md-4"><center>Profile</center></div>
</div>

I'm not sure what I'm missing here. Even after resizing my browser, the columns still wrap onto a new line. Any assistance would be greatly appreciated!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Implement the following CSS either by using a class name on the parent row, or apply it directly as styling

. class_name {
flex-wrap: nowrap;
}

Using "nowrap" will ensure that all child elements are displayed in a single row

Answer №2

It seems like this solution could be beneficial to you.

.single-row{
display: flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>



<div class="container-fluid">
  <div class="row single-row" >
    <div class="col-sm-2" style="background-color:lavender;">Feed</div>
    <div class="col-sm-2" style="background-color:lavenderblush;">tutor</div>
    <div class="col-sm-2" style="background-color:lavender;">profile</div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

php prevent unauthorized direct access to URLs

I have a variety of files such as: _main.php_, _header.html_, _page1.php_, _page2.php_,.. The header.html is included in main.php and contains links to page1.php and page2.php. I want to restrict access to page1.php and page2.php so that they can only be ...

phphtml

Concealing HTML pages in Node.js: A step-by-step guide

I have a specific requirement where my website's html pages should only be accessible to users who are logged in. However, when I used the command below, my html pages became public: app.use(express.static('public')); For instance, I do no ...

javascripthtmlnode.jsexpresspublic

Pytest is not able to locate any elements on the webpage, yet the same elements can be easily found using the console

When using CSS or XPath in the console (F12), I am able to locate the element on the page. $$("span.menu-item[data-vars-category-name='Most Popular']") However, when trying to find the same elements with Selenium (pytest) using: driver.find_el ...

javascripthtmlpython-3.xseleniumpytest

Styling the elements that are next to each other using CSS

Hey there, what if I have HTML elements structured like this: <div> <div>Name</div> <div><input type="text" class="check"> <div>Age</div> <div><input type="number" class="check"></div> ...

javascripthtmljquerycss

Mandatory tick box needed for submitting PHP form

Although the topic of PHP form validation is frequently discussed, I am a complete beginner in PHP and I am currently experimenting with a PHP form script that I discovered here. As a result, I am unsure about how to proceed with incorporating two specific ...

phphtmlformsvalidation

How can the text color of an ASP Label be modified when the DropdownList value is updated?

Objective: Modify the text color of an ASP Label based on the selection made in an ASP Dropdown ListItem. If the ListItem's value is false, then set the Label's text color to red; otherwise, keep it black. Challenge: The color only changes when ...

javascriptc#cssasp.net

Insert details into Mysql database

This indicates an issue with Line 15 of my code. I would like to include additional details and have them displayed in a table. see image here Error alert: syntax error, unexpected ';' in N:\ftp\compc\ac12mm\untitled folder& ...

phphtml

jQuery not displaying Div elements as expected

After experimenting with the Coverflow technique and adapting it to work with a div, I have encountered a slight issue. Below is the HTML code I am using: <html> <head> <meta http-equiv="Content-type" content="text/html; ...

javascriptjqueryhtmlcss

Encountering a problem where updating the selected option in a dropdown does not properly refresh the HTML

I am currently working with a dropdown menu containing countries. Initially, the selected item is set to Ukraine. <select id="country" name="country"> <option value="US">USA</option> <option value="UG">Uganda</option> ...

javascriptjqueryhtmlxsltdrop-down-menu

An unconventional way to display an image using the :before pseudo-element and a data attribute in CSS

My goal is to use the :before pseudo-element to set an image background, as I plan to overlay content on top of it. In the past, I have dynamically set a data attribute with :before for other purposes. Question: Is there a way to change the number using ...

javascriptjquerycss

"Displaying <canvas> at its true resolution even when zoomed in, thanks to Retina technology

I am currently working with a <canvas> element to create vector graphics and I want to ensure that it displays in the highest quality possible while using minimal resources across various viewing conditions. Specifically, I aim to achieve a 1:1 mappi ...

csshtmlcanvaszoomingretina-display

Analyzing the browser's address bar and creating a navigation link derived from it

Is there a way to create a script that can extract information from the address bar? For example, if we have a link like this: We want to be able to take the "page-2011" part and dynamically generate navigation links like this: « <a href="/page-2010 ...

javascriptjqueryhtmlcss

Maintaining responsiveness, CSS grid will automatically adjust the height of each element to be equal

I am facing an issue with my grid layout. Each element in the grid has an image and other divs below it. The problem arises when the screen size changes, causing the elements to scale automatically due to responsive width. I want all the images to have the ...

htmlcsscss-gridresponsive

Integrating information from various sources to create a cohesive online platform

I am looking to incorporate data from various sources into a single web page: Social networks (Facebook, Twitter, LinkedIn, etc.) RSS feeds Article meta tags (particularly OpenGraph and Twitter cards) This data may change dynamically based on user inter ...

javascripthtmlfrontend

Is there an obstacle hindering the load event?

There's something strange happening on a website I created. The page content loads in 5 or 6 seconds, but the DOMContentLoaded and Load Event don't actually fire until 1 minute and 10 seconds later. When I reload the page during loading, it load ...

javascripthtmldom-events

Setting up a textarea tooltip using highlighter.js

I'm experimenting with using highlighter.js within a textarea. I've customized their sample by substituting the p with a textarea enclosed in a pre tag (for right-to-left language settings). <div class="article" style="width: 80%; height: 80% ...

javascriptjqueryhtmltooltip

Are there any CSS styles available for targeting an element with any id?

I need to style h2 tags in HTML documents that have an id attribute, without styling the ones without an id. I want to achieve this using only CSS and not by modifying the HTML structure. Specifically, I want to target these h2 elements with a CSS rule: ...

htmlcss

Keep the Bootstrap dropdown menu open when the search bar is in focus

I am working on a customized bootstrap dropdown menu that needs to remain open when the search bar within the Events dropdown is focused. I have managed to make it open and close on hover, but now I need it to stay open under certain conditions. Below is ...

javascriptjquerycsstwitter-bootstrapdrop-down-menu

Fonts fail to load on Internet Explorer 10

Link to the website in question: In my fonts.css file, I am loading multiple fonts as shown below: @font-face { font-family: GothamBook; src: url('../fonts/Gotham-Book.otf'); src: url( ../fonts/Gotham-Book.otf ); /* IE */ } @font-face ...

cssinternet-explorerfontsfont-face

Show SVG in img tag on entire screen

I am facing an issue where my SVG image is not fully visible when displayed within an img tag on the browser's full screen. The bottom part of the image gets truncated, making it inaccessible to users. Below is the code snippet I have been using: ht ...

htmlcsssvg